@charset "UTF-8";
/* WebDemo 외곽만 구성합니다. 셀, 헤더와 제품 팝업에는 범용 reset을 적용하지 않습니다. */
/* AUIGrid 브랜드: 차콜과 무채색을 기본으로 하고 탐색 및 조작의 강조에는 파란색을 사용합니다. */
:root { --demo-max-width: 1600px; --demo-page-offset: max(0px, calc((100% - var(--demo-max-width)) / 2)); --demo-nav-width: 280px; --demo-header-height: 80px; --demo-ink: #23292b; --demo-muted: #68737d; --demo-line: #e0e5ea; --demo-accent: #287fca; --demo-accent-strong: #206bab; --demo-accent-soft: #edf5fc; }
body.demo-shell { margin: 0; background: #f5f7f9; }
/* 메뉴를 포함한 전체 화면을 1600px 안에 가운데 배치하며 고정 헤더와 메뉴도 같은 시작점에 맞춥니다. */
.demo-shell > .app { width: 100%; max-width: var(--demo-max-width); margin: 0 auto; min-height: 100vh; }
.demo-shell #header { width: 100%; max-width: var(--demo-max-width); margin: 0 auto; }
.demo-shell :is(#example-nav-top, #nav-wrapper) { left: var(--demo-page-offset); }
.demo-shell :is(#header, #example-nav-top, #nav-wrapper, #main_top, #footer) { color: var(--demo-ink); }
.demo-shell :is(#header, #example-nav-top, #nav-wrapper, #main_top, #footer) a { color: inherit; text-decoration: none; }
#header { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--demo-header-height); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 28px; background: #fff; border-bottom: 1px solid var(--demo-line); }
.logo-bar, #logo, .header-buttons { display: flex; align-items: center; gap: 14px; }
/* 헤더 제목은 남은 공간에서 생략 표시하고 로고와 안내 링크의 크기는 유지합니다. */
.logo-bar { flex: 1; min-width: 0; }
#logo { gap: 14px; letter-spacing: -0.5px; flex-shrink: 0; }
.demo-brand-text { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
.demo-brand-text strong { color: var(--demo-ink); font-size: 27px; line-height: 1.2; font-weight: 750; }
.demo-brand-text > span { color: var(--demo-accent); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.demo-header-divider { height: 30px; width: 1px; background: var(--demo-line); margin: 0 10px; flex-shrink: 0; }
body.demo-typography #demo-page-title { margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-buttons { gap: 24px; font-weight: 600; flex-shrink: 0; }
.header-buttons a:hover { color: var(--demo-accent) !important; }
.demo-icon-button { width: 34px; height: 34px; border: 1px solid var(--demo-line); background: #fff; border-radius: 6px; cursor: pointer; display: none; align-items: center; justify-content: center; padding: 8px; }
.demo-menu-icon, .demo-menu-icon::before, .demo-menu-icon::after { display: block; position: relative; height: 2px; width: 16px; background: #394452; }
.demo-menu-icon::before, .demo-menu-icon::after { content: ''; position: absolute; left: 0; }
.demo-menu-icon::before { top: -5px; }.demo-menu-icon::after { top: 5px; }
#example-nav-top { position: fixed; top: var(--demo-header-height); left: 0; width: var(--demo-nav-width); height: 118px; padding: 22px 18px 12px; box-sizing: border-box; background: #fff; border-right: 1px solid var(--demo-line); z-index: 35; }
.demo-nav-heading { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 12px; }
#demo-menu-count { font-weight: 400; color: var(--demo-muted); }
.demo-search { display: flex; gap: 8px; align-items: center; height: 36px; background: #f7f8fa; border: 1px solid var(--demo-line); border-radius: 6px; padding: 0 10px; }
.demo-search > span { font-size: 24px; color: #697381; }
.demo-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--demo-ink); padding: 0; }
.demo-search:focus-within { border-color: var(--demo-accent); box-shadow: 0 0 0 2px var(--demo-accent-soft); }
.demo-search kbd { color: #9299a3; border: 1px solid #dddfe4; border-radius: 3px; padding: 0 5px; }
#demo-search-status { margin: 6px 0 0; color: var(--demo-muted); }
#demo-search-status:empty { display: none; }
#nav-wrapper { position: fixed; inset: calc(var(--demo-header-height) + 118px) auto 0 0; width: var(--demo-nav-width); padding: 8px 12px 28px; box-sizing: border-box; overflow: auto; background: #fff; border-right: 1px solid var(--demo-line); z-index: 34; scrollbar-width: thin; scrollbar-color: #d4d8de transparent; overscroll-behavior: contain; }
#nav-wrapper ul { list-style: none; padding: 0; margin: 0; }
#nav-wrapper li { padding: 0; margin: 0; line-height: 1.5; }
/* 메뉴의 글꼴과 줄 높이를 유지하고 항목의 위아래 여백을 기존 디자인보다 각각 2px 줄입니다. */
#nav-wrapper .category { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; border-radius: 6px; background: transparent; color: #343d49; text-align: left; font: 700 14px/1.5 var(--demo-font); padding: 10px 8px 6px; margin: 10px 0 2px; cursor: pointer; }
#nav-wrapper .category::after { content: '⌄'; color: #9098a5; margin-left: 8px; }
#nav-wrapper .category[aria-expanded='false']::after { transform: rotate(-90deg); }
#nav-wrapper .root-nav-widgets a { position: relative; display: block; padding: 6px 16px 6px 14px; margin: 2px 0; border-radius: 5px; color: #596372; overflow-wrap: anywhere; font-weight: 400; line-height: 1.5; }
#nav-wrapper .root-nav-widgets a:hover { background: #f3f5f7; color: #252c36; }
#nav-wrapper .active > a { color: var(--demo-accent-strong); background: var(--demo-accent-soft); font-weight: 600; box-shadow: inset 3px 0 var(--demo-accent); }
#nav-wrapper .active > a:hover { background: #e1effb; color: var(--demo-accent-strong); }
#nav-wrapper .sub-category { display: block; color: #697381; padding: 8px 8px 2px 14px !important; font-weight: 600; }
#nav-wrapper .sub-nav-widgets a { padding-left: 28px; }
#nav-wrapper .new { position: absolute; top: 13px; right: 6px; width: 4px; height: 4px; background: var(--demo-accent); border-radius: 50%; }
#nav-wrapper [hidden] { display: none !important; }
body.demo-shell #main_top { margin-left: var(--demo-nav-width); padding: calc(var(--demo-header-height) + 30px) 32px 0; }
.demo-preview-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px; border: 1px solid var(--demo-line); border-top: 2px solid var(--demo-accent); border-radius: 8px 8px 0 0; background: #fff; }
.demo-preview-options { display: flex; align-items: center; gap: 10px; color: var(--demo-muted); }
#themeSelect { height: 34px; min-width: 150px; border: 1px solid #dce0e6; border-radius: 5px; background: #fff; padding: 3px 28px 3px 9px; color: #404955; }
body.demo-shell #main { margin: 0 32px 24px calc(var(--demo-nav-width) + 32px); padding: 24px; background: #fff; border: 1px solid var(--demo-line); border-top: 0; border-radius: 0 0 10px 10px; min-width: 0; display: flow-root; }
body.demo-shell #main > .desc:first-child { margin-bottom: 20px; padding-top: 0; }
.desc { padding: 4px 0 12px; width: 100%; margin: 0 auto; color: #4d5867; }
.desc p { margin: 10px 0 4px; }
.desc strong { color: #29323e; }
.desc a, .desc_bottom a { color: var(--demo-accent-strong); text-underline-offset: 3px; }
.desc_bottom { padding: 14px 0 0; width: 100%; margin: 0 auto; color: #697381; }
.desc_bottom p { margin: 6px 0; }
.demo-control-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; }
/* 밴드형 데모의 조작 영역: 설명과 설정을 구분하고 입력, 선택, 실행 버튼의 간격을 맞춥니다. */
.desc .demo-options { display: grid; gap: 14px; margin: 18px 0 4px; padding: 16px; border: 1px solid var(--demo-line); border-radius: 8px; background: #f8fafc; min-width: 0; }
.demo-option-row, .demo-option-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.demo-option-row + .demo-option-row { padding-top: 14px; border-top: 1px solid var(--demo-line); }
.demo-option-row--split { justify-content: space-between; gap: 12px 24px; }
.demo-option-label { font-weight: 600; color: var(--demo-ink); }
.demo-options label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 32px; }
.demo-options label:has(input:disabled) { color: #858e99; }
.demo-options .demo-check { gap: 8px; white-space: nowrap; }
.demo-options .demo-check input { margin: 0; }
.demo-options .demo-width-control { display: grid; grid-template-columns: auto minmax(80px, 1fr) 78px; align-items: center; gap: 16px; width: min(100%, 720px); }
.demo-shell .demo-options input[type='range'] { width: 100%; min-width: 0; height: 24px; padding: 0; margin: 0; border: 0; background: transparent; accent-color: var(--demo-accent); cursor: pointer; }
.demo-width-control output { text-align: center; padding: 4px 8px; border: 1px solid var(--demo-line); border-radius: 4px; background: #fff; color: var(--demo-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-segments { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border: 1px solid #d7dce3; border-radius: 6px; background: #fff; max-width: 100%; }
body.demo-typography .demo-options .btn { margin: 0; }
body.demo-typography .demo-options .demo-segments .btn { min-height: 30px; padding: 4px 12px; border-color: transparent; border-radius: 4px; background: transparent; }
body.demo-typography .demo-options .demo-segments .btn:hover { background: #f1f5f9; }
body.demo-typography .demo-options .demo-segments .btn[aria-pressed='true'] { background: var(--demo-accent-soft); border-color: #bfd8ee; color: var(--demo-accent-strong) !important; }
.desc .demo-option-note { margin: 0; color: var(--demo-muted); }
@media (max-width: 640px) {
    .desc .demo-options { padding: 12px; }
    .demo-options .demo-width-control { grid-template-columns: minmax(0, 1fr) 78px; gap: 8px 12px; }
    .demo-width-control label { grid-column: 1 / -1; }
    .demo-option-group { max-width: 100%; }
    .demo-options select { min-width: 0; }
}
/* 기존 예제의 btn 계약은 유지하되 제품 내부 버튼에는 적용하지 않습니다. */
body.demo-typography :is(.btn, .btn-disabled):not(:where(.aui-grid *, [class^='aui-grid-'] *, [class*=' aui-grid-'] *)) { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; box-sizing: border-box; padding: 5px 13px; margin: 3px 4px 3px 0; border: 1px solid #d7dce3; border-radius: 5px; background: #fff; color: #303946 !important; font: 600 14px/1.5 var(--demo-font); text-decoration: none; cursor: pointer; vertical-align: middle; }
body.demo-typography .btn:hover:not(:where(.aui-grid *)) { background: var(--demo-accent-soft); border-color: var(--demo-accent); }
body.demo-typography :is(.btn-disabled, .btn:disabled):not(:where(.aui-grid *)) { opacity: .5; cursor: not-allowed; background: #f5f6f8; }
/* 개별 데모 실행 버튼은 지정된 파란색을 사용하며 기존 여백과 전환을 유지합니다. 선택 탭과 제품 내부 컨트롤은 별도로 유지합니다. */
body.demo-typography:not(.demo-home) #main .btn:not(:where(.demo-segments *, .aui-grid *, [class^='aui-grid-'] *, [class*=' aui-grid-'] *)) {
    display: inline-block; min-height: 0; padding: 10px 17px; margin: 6px 8px 6px 0; border-radius: 4px;
    background: #337ab7; border-color: #337ab7; color: #fff !important;
    box-shadow: none; transition: background-color .15s;
}
body.demo-typography:not(.demo-home) #main .btn:hover:not(:where(.demo-segments *, .aui-grid *, [class^='aui-grid-'] *, [class*=' aui-grid-'] *)) {
    background: #286090; border-color: #337ab7;
}
body.demo-typography:not(.demo-home) #main .btn[aria-pressed='true']:not(:where(.demo-segments *, .aui-grid *, [class^='aui-grid-'] *, [class*=' aui-grid-'] *)) {
    background: #286090; border-color: #286090;
}
/* 비활성 상태도 AUIPivot처럼 기본 색상을 흐리게 표시하며 호버로 강조하지 않습니다. */
body.demo-typography:not(.demo-home) #main :is(.btn-disabled, .btn:disabled, .btn[aria-disabled='true']):not(:where(.demo-segments *, .aui-grid *, [class^='aui-grid-'] *, [class*=' aui-grid-'] *)) {
    display: inline-block; min-height: 0; padding: 10px 17px; margin: 6px 8px 6px 0; border-radius: 4px;
    background: #337ab7; border-color: #337ab7; color: #fff !important; box-shadow: none; opacity: .45; cursor: default;
}
/* 일반 데모 버튼보다 우선하도록 범위를 한정해 브랜드 버튼의 배경과 글자 대비를 유지합니다. */
body.demo-shell #main_top .demo-source-open { margin: 0; background: var(--demo-ink); color: #fff !important; border-color: var(--demo-ink); }
body.demo-shell #main_top .demo-source-open:hover { background: #3b4347; border-color: #3b4347; }
body.demo-shell #header .demo-trial { background: var(--demo-accent-strong); color: #fff !important; border-color: var(--demo-accent-strong); }
body.demo-shell #header .demo-trial:hover { background: #195989; border-color: #195989; }
.demo-source-open { white-space: nowrap; }
.demo-source-open > span { font-family: var(--demo-code-font); color: #fff; }
.demo-shell :is(.desc, .desc_bottom) :is(input, select, textarea):not(:where(.aui-grid *)) { font: 14px/1.5 var(--demo-font); border: 1px solid #d6dce4; border-radius: 4px; padding: 5px 7px; color: #303946; background: #fff; max-width: 100%; box-sizing: border-box; }
.demo-shell :is(.desc, .desc_bottom) input:is([type='checkbox'], [type='radio']) { accent-color: var(--demo-accent); padding: 0; margin: 0 5px 0 0; }
.src_cover { max-height: 230px; overflow: auto; margin: 12px 0; border-radius: 6px; border: 1px solid var(--demo-line); }
.src_cover .demo-code-frame { margin: 0; }
.nav_u { display: inline-flex; gap: 14px; padding: 0; list-style: none; flex-wrap: wrap; }
.nav_u li { display: inline; }.nav_u li input { margin-right: 5px; }
.icon-react { background-image: url(../assets/react-logo.png) !important; }.icon-vue { background-image: url(../assets/vue-logo.png) !important; }
.icon-btn { padding-left: 40px !important; background-size: 22px !important; background-position: 10px center !important; background-repeat: no-repeat !important; }
body.demo-shell #footer { display: flex; justify-content: space-between; gap: 20px; margin: 20px 32px 24px calc(var(--demo-nav-width) + 32px); color: #747e8b; }
#footer p { margin: 4px 0; }.demo-back-top { white-space: nowrap; }
#bottom_info { display: none; }
.demo-skip { position: fixed; top: -60px; left: 12px; z-index: 100; padding: 10px 16px; background: #fff; color: #111; }.demo-skip:focus { top: 8px; }
.demo-shell :is(a, button, input, select):focus-visible:not(:where(.aui-grid *)) { outline: 2px solid var(--demo-accent); outline-offset: 3px; }
#demo-nav-backdrop { position: fixed; inset: var(--demo-header-height) 0 0; z-index: 32; border: 0; background: rgb(35 41 43 / 30%); width: 100%; }
/* 기존 확인 대화상자와 Nova 전용 도구는 외곽 디자인으로만 조정합니다. */
.popup-layer { position: fixed; inset: 0; background: rgb(0 0 0 / 25%); z-index: 100000; }
.popup-confirm { position: fixed; top: 20%; left: 50%; transform: translateX(-50%); width: min(400px, calc(100vw - 64px)); padding: 24px; border: 1px solid var(--demo-line); border-radius: 10px; background: #fff; color: #333; box-shadow: 0 16px 60px #17263c30; }
.popup-confirm-footer { text-align: right; }
.themeToolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px 20px; border: 1px solid var(--demo-line); border-bottom: 0; background: #fff; }
.theme-switch { display: inline-flex; gap: 6px; align-items: center; }.sw { width: 22px; height: 22px; border: 2px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; border-radius: 50%; cursor: pointer; }
body.demo-shell.demo-home #main { border-top: 1px solid var(--demo-line); border-radius: 10px; }.demo-home .demo-preview-toolbar { display: none; }
.demo-home .feature_ul { padding-left: 22px; list-style: disc; }.demo-home .feature_ul li { padding: 3px 0; }.demo-home .ver_title { padding-top: 20px; border-top: 1px solid var(--demo-line); }
@media (max-width: 1100px) { .demo-header-divider, #demo-page-title { display: none; } .demo-icon-button { display: inline-flex; } #example-nav-top, #nav-wrapper { transform: translateX(-100%); transition: transform .18s ease; } .demo-nav-open :is(#example-nav-top, #nav-wrapper) { transform: translateX(0); } body.demo-shell #main_top { margin-left: 0; padding: calc(var(--demo-header-height) + 24px) 24px 0; } body.demo-shell #main { margin: 0 24px 20px; } body.demo-shell #footer { margin: 20px 24px; } }
@media (max-width: 760px) { .header-buttons > a:not(.demo-trial) { display: none; } }
@media (max-width: 640px) { :root { --demo-header-height: 72px; } #logo { gap: 10px; } .demo-brand-text strong { font-size: 22px; } .demo-brand-text > span { display: none; } #header { padding: 0 16px; gap: 8px; }.logo-bar { gap: 10px; }.header-buttons > a:not(.demo-trial) { display: none; }.header-buttons { gap: 0; }.demo-shell .demo-trial { padding: 5px 9px; margin: 0; } body.demo-shell #main_top { padding: calc(var(--demo-header-height) + 20px) 14px 0; }.demo-preview-toolbar { padding: 12px 14px; }.demo-preview-options { gap: 6px; } #themeSelect { width: 130px; min-width: 130px; max-width: 150px; } body.demo-shell #main { margin: 0 14px 20px; padding: 16px; overflow-x: clip; } body.demo-shell #footer { margin: 16px; flex-direction: column; gap: 8px; } }
/* 좁은 화면에서는 선택 상자의 접근성 이름을 유지하면서 도구가 한 줄에 들어가게 합니다. */
@media (max-width: 640px) { .demo-preview-options > label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
/* 가장 좁은 모바일 화면에서도 로고와 평가판 링크가 겹치지 않도록 장식과 간격을 줄입니다. */
@media (max-width: 360px) { #header { padding: 0 12px; } .logo-bar, #logo { gap: 8px; } .demo-shell .demo-trial { padding-inline: 7px; } .demo-trial > span { display: none; } }
@media (prefers-reduced-motion: reduce) { #example-nav-top, #nav-wrapper { transition: none; } }

/* 배포 패키지의 독립 HTML은 공통 CSS를 재사용해도 사이드바 여백을 갖지 않습니다. */
body.demo-typography:not(.demo-shell) #main { margin: 16px; padding: 0; }
body.demo-typography:not(.demo-shell) #footer { margin: 16px; color: #747e8b; }
.demo-footer-links { display: flex; gap: 16px; white-space: nowrap; }

/* 홈페이지 메뉴의 위치는 화면 최상단에 유지하고 기존 제품 제목은 그 아래에 배치합니다. */
body.demo-shell { --demo-header-height: 125px; }
.demo-shell > .auisoft-site-header { position: fixed; inset: 0 0 auto; }
.demo-shell #header { top: 69px; height: 56px; }
.demo-shell #header #logo { letter-spacing: normal; }
.demo-shell #header .demo-brand-text strong { font-size: 20px; font-weight: 700; line-height: 1.2; }
.demo-shell #header .demo-header-divider { height: 24px; }
/* 본문 h1 규격과 분리하여 제품 제목 옆의 개별 메뉴도 헤더 높이에 맞춥니다. */
body.demo-shell #demo-page-title { font-size: 21px !important; line-height: 1.2 !important; }

/* HOME은 고정 제품 제목만 보여주며 중복되는 h1은 접근성 탐색용으로 보존합니다. */
.demo-shell.demo-home .demo-header-divider { display: none; }
body.demo-shell.demo-home #demo-page-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }

/* 쇼케이스의 구현 문서는 그리드 아래에서 짧게 안내하고 작은 화면에서는 줄바꿈합니다. */
#main .showcase-api-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 12px 0; font-size: 14px; }
#main .showcase-api-links strong { color: #465366; }
#main .showcase-api-links a { color: #216eae; text-decoration: underline; text-underline-offset: 3px; }