newtil-css 0.2.77 → 0.2.79
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +226 -31
- package/dist/components.css +4 -2
- package/dist/js/n-layout.js +1 -1
- package/dist/style.css +6 -4
- package/dist/utils.css +3 -3
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,42 +1,237 @@
|
|
|
1
|
-
<
|
|
2
|
-
<
|
|
1
|
+
<div align="center">
|
|
2
|
+
<a href="https://newlecture-corp.github.io/newtil-css/">
|
|
3
|
+
<img
|
|
4
|
+
src="https://github.com/newlecture-corp/newtil-css/blob/main/docs/public/logo.png"
|
|
5
|
+
alt="newtil-css"
|
|
6
|
+
height="120"
|
|
7
|
+
/>
|
|
8
|
+
</a>
|
|
9
|
+
|
|
10
|
+
<h1>Newtil CSS</h1>
|
|
11
|
+
|
|
12
|
+
<p>
|
|
13
|
+
<strong>유틸리티 중심의 현대적인 CSS 라이브러리</strong>
|
|
14
|
+
</p>
|
|
15
|
+
|
|
16
|
+
<p>
|
|
3
17
|
<a href="https://newlecture-corp.github.io/newtil-css/">
|
|
4
|
-
<img
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
18
|
+
<img src="https://img.shields.io/badge/docs-visit-blue?style=flat-square" alt="Documentation" />
|
|
19
|
+
</a>
|
|
20
|
+
<a href="https://github.com/newlecture-corp/newtil-css/blob/main/LICENSE">
|
|
21
|
+
<img src="https://img.shields.io/badge/license-MIT-green?style=flat-square" alt="License" />
|
|
22
|
+
</a>
|
|
23
|
+
<a href="https://www.newlecture.com">
|
|
24
|
+
<img src="https://img.shields.io/badge/by-뉴렉처-orange?style=flat-square" alt="Newlecture" />
|
|
9
25
|
</a>
|
|
10
|
-
</div>
|
|
11
|
-
<h1>
|
|
12
|
-
<strong>
|
|
13
|
-
Newtil CSS
|
|
14
|
-
</strong>
|
|
15
|
-
</h1>
|
|
16
|
-
<p>
|
|
17
|
-
유틸리티 중심의 CSS 라이브러리
|
|
18
26
|
</p>
|
|
19
|
-
|
|
20
|
-
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## ✨ 주요 특징
|
|
32
|
+
|
|
33
|
+
### 🎯 순수 CSS와 100% 동일한 명명 규칙
|
|
34
|
+
CSS 속성을 그대로 클래스명으로 사용하여 학습 곡선을 최소화합니다.
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<!-- CSS: display: flex; justify-content: center; -->
|
|
38
|
+
<div class="d:flex jc:center">...</div>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### 🎨 Google Icons 완벽 지원
|
|
42
|
+
Google Material Icons를 간편하게 사용할 수 있습니다.
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<i class="n-icon">home</i>
|
|
46
|
+
<i class="n-icon">search</i>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### 🔧 CSS 변수 기반 컴포넌트
|
|
50
|
+
사용자 정의가 쉬운 유연한 컴포넌트 시스템을 제공합니다.
|
|
51
|
+
|
|
52
|
+
```css
|
|
53
|
+
.n-section {
|
|
54
|
+
--padding: var(--space-4);
|
|
55
|
+
--bd-radius: var(--space-3);
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### 🌓 다크 모드 자동 지원
|
|
60
|
+
`prefers-color-scheme`을 통해 자동으로 다크 모드를 지원합니다.
|
|
61
|
+
|
|
62
|
+
### 📱 반응형 디자인
|
|
63
|
+
모바일부터 데스크톱까지 모든 화면 크기에 최적화되어 있습니다.
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
67
|
+
## 🚀 빠른 시작
|
|
68
|
+
|
|
69
|
+
### CDN으로 설치
|
|
70
|
+
```html
|
|
71
|
+
<link href="https://newlecture-corp.github.io/newtil-css/dist/style.css" rel="stylesheet" />
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### npm으로 설치
|
|
75
|
+
```bash
|
|
76
|
+
npm install newtil-css
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### 기본 사용법
|
|
80
|
+
```html
|
|
81
|
+
<!DOCTYPE html>
|
|
82
|
+
<html lang="ko">
|
|
83
|
+
<head>
|
|
84
|
+
<link href="path/to/newtil-css/style.css" rel="stylesheet" />
|
|
85
|
+
</head>
|
|
86
|
+
<body>
|
|
87
|
+
<div class="n-layout">
|
|
88
|
+
<header class="n-header">
|
|
89
|
+
<h1>My App</h1>
|
|
90
|
+
</header>
|
|
91
|
+
<main>
|
|
92
|
+
<section class="n-section section:card">
|
|
93
|
+
<h1>Welcome</h1>
|
|
94
|
+
<p>Newtil CSS로 빠르게 시작하세요!</p>
|
|
95
|
+
</section>
|
|
96
|
+
</main>
|
|
97
|
+
</div>
|
|
98
|
+
</body>
|
|
99
|
+
</html>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## 📦 주요 컴포넌트
|
|
21
105
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
106
|
+
### Layout
|
|
107
|
+
```html
|
|
108
|
+
<div class="n-layout">
|
|
109
|
+
<header class="n-header">...</header>
|
|
110
|
+
<aside>...</aside>
|
|
111
|
+
<main>...</main>
|
|
112
|
+
<footer>...</footer>
|
|
113
|
+
</div>
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### Section
|
|
117
|
+
```html
|
|
118
|
+
<section class="n-section section:card">
|
|
119
|
+
<h1>제목</h1>
|
|
120
|
+
<div>내용</div>
|
|
29
121
|
</section>
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
**Section Types:**
|
|
125
|
+
- `section:card` - 경계선이 있는 카드 스타일
|
|
126
|
+
- `section:glass` - Glassmorphism 효과
|
|
127
|
+
- `section:elevated` - 그림자 효과
|
|
128
|
+
|
|
129
|
+
### List
|
|
130
|
+
```html
|
|
131
|
+
<ul class="n-list list-sep:solid list-dir:column">
|
|
132
|
+
<li>항목 1</li>
|
|
133
|
+
<li>항목 2</li>
|
|
134
|
+
<li>항목 3</li>
|
|
135
|
+
</ul>
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
### Button
|
|
139
|
+
```html
|
|
140
|
+
<button class="n-btn btn-color:main btn-style:fill">
|
|
141
|
+
클릭하세요
|
|
142
|
+
</button>
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
### Form
|
|
146
|
+
```html
|
|
147
|
+
<input class="n-input" type="text" placeholder="입력하세요" />
|
|
148
|
+
<select class="n-select">
|
|
149
|
+
<option>옵션 1</option>
|
|
150
|
+
</select>
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
---
|
|
154
|
+
|
|
155
|
+
## 🎨 유틸리티 클래스
|
|
156
|
+
|
|
157
|
+
### 레이아웃
|
|
158
|
+
```html
|
|
159
|
+
<div class="d:flex jc:center ai:center gap:4">...</div>
|
|
160
|
+
<div class="d:grid gtc:3">...</div>
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
### 간격
|
|
164
|
+
```html
|
|
165
|
+
<div class="p:4 m:2">...</div>
|
|
166
|
+
<div class="px:4 py:2">...</div>
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
### 색상
|
|
170
|
+
```html
|
|
171
|
+
<div class="c:main bg:base-1">...</div>
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
### 크기
|
|
175
|
+
```html
|
|
176
|
+
<div class="w:100p h:50vh">...</div>
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
---
|
|
180
|
+
|
|
181
|
+
## 📚 문서
|
|
182
|
+
|
|
183
|
+
자세한 사용법과 예제는 [공식 문서](https://newlecture-corp.github.io/newtil-css/)를 참고하세요.
|
|
184
|
+
|
|
185
|
+
### 주요 문서
|
|
186
|
+
- [컴포넌트 가이드](https://newlecture-corp.github.io/newtil-css/components)
|
|
187
|
+
- [유틸리티 클래스](https://newlecture-corp.github.io/newtil-css/utilities)
|
|
188
|
+
- [커스터마이징](https://newlecture-corp.github.io/newtil-css/customization)
|
|
189
|
+
- [예제 모음](https://newlecture-corp.github.io/newtil-css/examples)
|
|
30
190
|
|
|
31
|
-
|
|
191
|
+
---
|
|
32
192
|
|
|
33
|
-
|
|
34
|
-
- [Google Icons](https://fonts.google.com/icons)
|
|
193
|
+
## 🤝 기여하기
|
|
35
194
|
|
|
36
|
-
|
|
195
|
+
기여는 언제나 환영합니다!
|
|
37
196
|
|
|
38
|
-
|
|
197
|
+
1. Fork the Project
|
|
198
|
+
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
|
|
199
|
+
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
|
|
200
|
+
4. Push to the Branch (`git push origin feature/AmazingFeature`)
|
|
201
|
+
5. Open a Pull Request
|
|
39
202
|
|
|
40
|
-
|
|
203
|
+
---
|
|
41
204
|
|
|
42
|
-
|
|
205
|
+
## 📖 참고 자료
|
|
206
|
+
|
|
207
|
+
- [MDN Web Docs](https://developer.mozilla.org/) - CSS 레퍼런스
|
|
208
|
+
- [Google Material Icons](https://fonts.google.com/icons) - 아이콘 라이브러리
|
|
209
|
+
- [CSS Tricks](https://css-tricks.com/) - CSS 팁과 트릭
|
|
210
|
+
|
|
211
|
+
---
|
|
212
|
+
|
|
213
|
+
## 📄 라이선스
|
|
214
|
+
|
|
215
|
+
이 프로젝트는 MIT 라이선스 하에 배포됩니다. 자세한 내용은 [LICENSE](LICENSE) 파일을 참고하세요.
|
|
216
|
+
|
|
217
|
+
---
|
|
218
|
+
|
|
219
|
+
## 👨💻 제작자
|
|
220
|
+
|
|
221
|
+
**뉴렉처 (Newlecture)**
|
|
222
|
+
|
|
223
|
+
- Website: [https://www.newlecture.com](https://www.newlecture.com)
|
|
224
|
+
- GitHub: [@newlecture-corp](https://github.com/newlecture-corp)
|
|
225
|
+
|
|
226
|
+
---
|
|
227
|
+
|
|
228
|
+
<div align="center">
|
|
229
|
+
<p>
|
|
230
|
+
Made with ❤️ by <a href="https://www.newlecture.com">뉴렉처</a>
|
|
231
|
+
</p>
|
|
232
|
+
<p>
|
|
233
|
+
<a href="https://newlecture-corp.github.io/newtil-css/">Documentation</a> •
|
|
234
|
+
<a href="https://github.com/newlecture-corp/newtil-css/issues">Report Bug</a> •
|
|
235
|
+
<a href="https://github.com/newlecture-corp/newtil-css/issues">Request Feature</a>
|
|
236
|
+
</p>
|
|
237
|
+
</div>
|
package/dist/components.css
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");html:has(.n-layout){height:100%}body:has(.n-layout){height:100%}.n-layout{display:grid;grid-template-areas:"header" "main" "footer";grid-template-columns:1fr;grid-template-rows:min-content 1fr min-content;height:100%;min-height:100vh;overflow-x:hidden;>:where(header,.n-header,*>.n-header){box-shadow:1px 1px 1px var(--header-border-color,--color-base-3);grid-area:header;height:var(--header-height,64px)}>:where(main,.n-main,*>.n-main){grid-area:main}>:where(footer,.n-footer,*>.n-footer){border-top:1px solid var(--color-base-3);grid-area:footer;height:var(--footer-height,120px)}}.n-layout:has(>aside,>.n-aside){grid-template-areas:"header header" "aside main" "footer footer";grid-template-columns:var(--aside-width,auto) 1fr;overflow-x:hidden;transition:grid-template-columns .5s ease;transition:grid-template-areas .5s ease;will-change:grid-template-columns,grid-template-areas;>:where(aside,.n-aside,*>.n-aside){border-right:1px solid var(--color-base-3);grid-area:aside;position:relative;resize:horizontal;transition:transform .5s ease;width:250px;will-change:transform}&.aside-width\:responsive:not(.aside\:resizable)>:where(aside,.n-aside,*>.n-aside){transition:width .5s ease;width:100%}&.aside-width\:min-content:not(.aside\:resizable)>:where(aside,.n-aside,*>.n-aside){width:min-content}&.aside\:slide-out{grid-template-columns:0 1fr;overflow-x:hidden;transition:grid-template-columns .5s ease;>:where(aside,.n-aside,*>.n-aside){overflow:hidden;position:absolute;transform:translateX(-100%);z-index:-1}}&.aside\:right.aside\:slide-out{grid-template-columns:1fr 0;overflow-x:hidden;transition:grid-template-columns .5s ease;>:where(aside,.n-aside,*>.n-aside){overflow:hidden;position:absolute;transform:translateX(100%);z-index:-1}}&.aside\:right{grid-template-areas:"header header" "main aside" "footer footer";grid-template-columns:1fr var(--aside-width,auto);overflow-x:hidden;>:where(aside,.n-aside,*>.n-aside){border-left:1px solid var(--color-base-3);border-right:none}}&.aside\:resizable>:where(aside,.n-aside,*>.n-aside):after{background:linear-gradient(90deg,transparent 0,rgba(0,0,0,.05) 50%,rgba(0,0,0,.1));content:"";cursor:ew-resize;height:100%;position:absolute;right:-2px;top:0;transition:background .2s ease;width:4px;z-index:10}&.aside\:right.aside\:resizable>:where(aside,.n-aside,*>.n-aside):after{background:linear-gradient(270deg,transparent 0,rgba(0,0,0,.05) 50%,rgba(0,0,0,.1));left:-2px;right:auto}&.aside\:resizable>:where(aside,.n-aside,*>.n-aside):hover:after{background:linear-gradient(90deg,transparent 0,rgba(0,0,0,.1) 50%,rgba(0,0,0,.2))}&.aside\:right.aside\:resizable>:where(aside,.n-aside,*>.n-aside):hover:after{background:linear-gradient(270deg,transparent 0,rgba(0,0,0,.1) 50%,rgba(0,0,0,.2))}&.aside\:resizable>:where(aside,.n-aside,*>.n-aside).resizing:after{background:linear-gradient(to right,transparent 0,rgba(var(--rgb-main-1),.3) 50%,rgba(var(--rgb-main-1),.5) 100%)}&.aside\:right.aside\:resizable>:where(aside,.n-aside,*>.n-aside).resizing:after{background:linear-gradient(to left,transparent 0,rgba(var(--rgb-main-1),.3) 50%,rgba(var(--rgb-main-1),.5) 100%)}}@media (max-width:640px){.n-layout:has(>aside,>.n-aside){&.aside-width\:responsive{grid-template-columns:var(--aside-width,45px) 1fr}}.n-layout:has(>aside,>.n-aside).aside\:right{&.aside-width\:responsive{grid-template-columns:1fr var(--aside-width,45px)}}}.n-layout{>.n-header:has(.n-aside-toggle:checked)~:where(aside,.n-aside,*>aside,*>.n-aside){background-color:var(--color-base-1);height:100%;left:0;position:absolute;top:0;transform:translateX(-100%)}}@media (max-width:640px){.n-layout{&>:where(aside,.n-aside){width:45px}}}.n-section{display:flex}.n-section\:aside-menu{border-top:1px solid var(--color-base-5);display:flex;flex-direction:column;overflow:hidden;padding:var(--gap-5) 0 var(--gap-3) 0;>h1{font-size:1rem;font-weight:600;margin-bottom:var(--gap-2);padding-left:var(--gap-2)}}.n-section\:card,.n-section\:card-1,.n-section\:card-2,.n-section\:card-3,.n-section\:card-radus,.n-section\:card-shadow{background-color:var(--n-bg-color,var(--color-base-1));border:1px solid rgba(0,0,0,.1);box-sizing:border-box;flex-shrink:0;max-width:300px;padding:20px;width:100%;img{object-fit:cover;width:100%}}.n-section\:card-2,.n-section\:card-3,.n-section\:card-radus,.n-section\:card-shadow{border-radius:var(--n-bd-radius,var(--gap-2))}.n-section\:card-3,.n-section\:card-shadow{box-shadow:0 1px 3px -1px rgba(22,26,32,.05),0 2px 8px -1px rgba(50,50,93,.13)}@media (max-width:600px){.n-section\:aside-menu{padding:0;>h1{display:none}}}:where(.n-panel,.n-panel\:1,.n-panel\:2,.n-panel\:3,.n-panel\:slide,.n-frame,.n-frame\:1,.n-frame\:2,.n-frame\:3){--n-padding:12px 14px;--n-bd-radius:12px;border:none;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;padding:var(--n-padding)}.n-frame,.n-frame\:1,.n-panel,.n-panel\:1{padding:var(--n-padding)}.n-frame\:2,.n-frame\:3,.n-panel\:2,.n-panel\:3{box-shadow:0 1px 3px -1px rgba(22,26,32,.05),0 2px 8px -1px rgba(50,50,93,.13);padding:var(--n-padding)}.n-frame\:3,.n-panel\:3{border:1px solid rgba(0,0,0,.1);border-radius:var(--n-bd-radius)}.n-panel\:slide{position:relative;.slide-cliper{height:100%;margin-right:var(--gap-6);overflow:hidden;position:relative;>.n-list{position:relative}}&:not(:has(.slide-cliper)):after{align-items:center;color:red;content:"오류 : n-panel:slide는 .slide-cliper를 찾을 수 없습니다.";display:flex;flex-grow:1;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}}:where(.n-frame,.n-frame\:1,.n-frame\:2,.n-frame\:3){--n-padding:0px;border:1px solid;>h1,>header{display:flex;padding:var(--gap-4) var(--gap-6);>h1{align-items:center;display:flex}}>h1~*,>header~*{border-top:1px solid;height:auto;padding:var(--gap-4) var(--gap-6);transition:height .3s ease,overflow .3s ease}}:where(.n-frame,.n-frame\:1,.n-frame\:2,.n-frame\:3).n-expandable{>h1:has(.n-btn\:expander),>header:has(.n-btn\:expander){cursor:pointer;.n-icon\:arrow_drop_down:has(.n-btn\:expander:checked):before{content:"\e5c7"}}>h1~*,>header~*{border-top:none;height:0;overflow:hidden;padding:0}>h1:not(:has(.n-btn\:expander)),>header:not(:has(.n-btn\:expander)){&:after{align-items:center;color:red;content:"오류 : n-expandable은 n-btn:expander 버튼이 필요합니다.";display:inline-flex;flex-grow:1;justify-content:flex-end}}>h1:has(.n-btn\:expander:checked)~*,>header:has(.n-btn\:expander:checked)~*{border-top:1px solid rgba(0,0,0,.1);height:auto;padding:var(--gap-4) var(--gap-6);transition:height .3s ease,overflow .3s ease}}:where(.n-frame,.n-frame\:ruled,.n-frame\:outlined){>h1,>header{align-items:center;display:flex;width:100%}>h1,>header>h1{font-size:var(--panel-header-fs,var(--font-size-7,16px));font-weight:var(--panel-header-fw,var(--font-weight-2,bold))}>:is(table,ul,dl,form,div,.content){align-items:var(--content-align,start);display:flex;flex-direction:var(--content-direction,column);justify-content:var(--content-justify,start);list-style:var(--list-style,circle);overflow:hidden;position:relative;width:var(--panel-content-width,100%);>:where(li,dt,dd,.item){align-items:start;display:flex;flex-direction:row;flex-direction:column;padding:1em 1.5em;width:100%}}}:where(.n-frame,.n-frame\:ruled,.n-frame\:outlined):has(>h1,>header){>:is(table,ul,dl,form,div,.content){padding-top:1em}}.list-title\:underline{>h1,>header{border-bottom:1px solid var(--panel-header-bd-bottom,var(--color-base-3));padding-bottom:10px}}.list-item-style\:circle{>:where(table,ul,dl,form,div,.content){list-style:var(--list-style,circle)}}.n-frame\:outlined.n-frame-item\:card{>:where(table,ul,dl,form,div,.content){>:where(li,dt,dd,section){align-items:start;flex-direction:column;padding:1em 1.5em}}}.n-frame\:outlined{>:where(table,ul,dl,form,div,.content){gap:1em;>:where(li,dt,dd,section){align-items:center;border:1px solid var(--panel-header-bd-bottom,var(--color-base-3));display:flex;min-height:40px;padding:0 10px}}}.n-frame\:outlined.outlined-gap\:1{>:where(table,ul,dl,form,div,.content){gap:var(--gap-1,4px)}}.n-frame\:outlined.outlined-gap\:2{>:where(table,ul,dl,form,div,.content){gap:var(--gap-2,8px)}}.n-frame\:ruled{>:where(table,ul,dl,form,div,.content){>:where(li,dt,dd){line-height:2.5em;position:relative}>:where(li,dt,dd,section):after{background-color:var(--panel-header-bd-bottom,var(--color-base-3));bottom:0;content:"";display:flex;height:1px;padding:0;position:absolute;width:100%}>:where(li,dt,dd):last-child:after{display:none;min-height:40px}}}.n-frame\:ruled:has(section):before{align-items:center;color:red;content:"ruled-list 클래스 박스 안에 section 태그를 포함할 수 없습니다.";display:flex;font-weight:700;justify-content:center;padding:20px 20px 0;width:100%}.n-form{--form-border-radius:16px;--form-padding:24px;--input-padding-x:12px;--input-input-height:36px;--input-textarea-min-height:58px;--input-border-radius:6px;--input-border-color:var(--color-base-3);--input-underline-border-width:1.6px;--input-border-color-focus:var(--color-sub-2);--input-border-color-success:#37b24d;--input-color-warning:var(--color-accent-1);--input-border-color-warning:var(--color-accent-1);display:flex;flex-direction:column;gap:var(--gap-5);>div{display:flex;flex-direction:column;gap:5px;padding:5px 0;width:100%;label{display:flex;flex-direction:column;gap:5px;>span{display:inline-flex;font-weight:500;width:100%}>input[type=email],>input[type=number],>input[type=password],>input[type=search],>input[type=tel],>input[type=text],>input[type=url],>textarea{background-color:var(--color-base-1);border:1px solid var(--input-border-color);border-radius:var(--input-border-radius);box-shadow:0 1px 1.5px 0 rgba(0,0,0,.05);color:rgba(var(--rgb-base-7),.85);cursor:default;flex-grow:1;font-size:14px;line-height:150%;padding:4px var(--input-padding-x);transition:border .12s}>textarea{height:auto;min-height:100px;overflow-y:auto}}}&.n-label-pos\:left{>div{label{align-items:center;flex-direction:row;width:100%;>span{text-wrap:nowrap;display:inline-flex;justify-content:center;overflow:hidden;text-overflow:ellipsis " [..]";white-space:nowrap;width:20%}>span:after{content:" : "}input{flex-grow:1}}}}}.n-input{--input-padding-x:12px;--input-input-height:36px;--input-textarea-min-height:58px;--input-border-color:var(--color-base-3);--input-border-radius:6px;--input-underline-border-width:1.6px;--input-border-color-focus:var(--color-sub-2);--input-border-color-success:#37b24d;--input-color-warning:var(--color-accent-1);--input-border-color-warning:var(--color-accent-1)}.n-input,input[type=email].n-input,input[type=number].n-input,input[type=password].n-input,input[type=search].n-input,input[type=tel].n-input,input[type=text].n-input,input[type=url].n-input,textarea.n-input{background-color:var(--color-base-1);border:1px solid var(--input-border-color);border-radius:var(--input-border-radius);box-shadow:0 1px 1.5px 0 rgba(0,0,0,.05);color:rgba(var(--rgb-base-10),.85);padding:4px var(--input-padding-x);width:100%}.n-input,.n-input-type\:outline,.n-input\:outline,input[type=email].n-input,input[type=email].n-input-type\:outline,input[type=email].n-input\:outline,input[type=number].n-input,input[type=number].n-input-type\:outline,input[type=number].n-input\:outline,input[type=password].n-input,input[type=password].n-input-type\:outline,input[type=password].n-input\:outline,input[type=search].n-input,input[type=search].n-input-type\:outline,input[type=search].n-input\:outline,input[type=tel].n-input,input[type=tel].n-input-type\:outline,input[type=tel].n-input\:outline,input[type=text].n-input,input[type=text].n-input-type\:outline,input[type=text].n-input\:outline,input[type=url].n-input,input[type=url].n-input-type\:outline,input[type=url].n-input\:outline{height:var(--input-input-height)}.n-input-type\:underline,.n-input\:underline,input[type=email].n-input-type\:underline,input[type=email].n-input\:underline,input[type=number].n-input-type\:underline,input[type=number].n-input\:underline,input[type=password].n-input-type\:underline,input[type=password].n-input\:underline,input[type=search].n-input-type\:underline,input[type=search].n-input\:underline,input[type=tel].n-input-type\:underline,input[type=tel].n-input\:underline,input[type=text].n-input-type\:underline,input[type=text].n-input\:underline,input[type=url].n-input-type\:underline,input[type=url].n-input\:underline{background-color:transparent;border-left:none;border-radius:0;border-right:none;border-top:none;border-width:var(--input-underline-border-width);box-shadow:none;transition-duration:.2s;transition-property:border-color}textarea.n-input{height:100%;min-height:var(--input-textarea-min-height);resize:none}.n-input.n-input-status\:focus,input[type=email].n-input.n-input-status\:focus,input[type=email].n-input:focus,input[type=number].n-input.n-input-status\:focus,input[type=number].n-input:focus,input[type=password].n-input.n-input-status\:focus,input[type=password].n-input:focus,input[type=search].n-input.n-input-status\:focus,input[type=search].n-input:focus,input[type=tel].n-input.n-input-status\:focus,input[type=tel].n-input:focus,input[type=text].n-input.n-input-status\:focus,input[type=text].n-input:focus,input[type=url].n-input.n-input-status\:focus,input[type=url].n-input:focus,textarea.n-input.n-input-status\:focus,textarea.n-input:focus{border-color:var(--input-border-color-focus)}.n-input.n-input-status\:success,input[type=email].n-input.n-input-status\:success,input[type=number].n-input.n-input-status\:success,input[type=password].n-input.n-input-status\:success,input[type=search].n-input.n-input-status\:success,input[type=tel].n-input.n-input-status\:success,input[type=text].n-input.n-input-status\:success,input[type=url].n-input.n-input-status\:success,textarea.n-input.n-input-status\:success{border-color:var(--input-border-color-success)}.n-input.n-input-status\:warning,input[type=email].n-input.n-input-status\:warning,input[type=number].n-input.n-input-status\:warning,input[type=password].n-input.n-input-status\:warning,input[type=search].n-input.n-input-status\:warning,input[type=tel].n-input.n-input-status\:warning,input[type=text].n-input.n-input-status\:warning,input[type=url].n-input.n-input-status\:warning,textarea.n-input.n-input-status\:warning{border-color:var(--input-border-color-warning);color:var(--input-color-warning)}.n-input.n-input-status\:disabled,input[type=email].n-input.n-input-status\:disabled,input[type=email].n-input:disabled,input[type=number].n-input.n-input-status\:disabled,input[type=number].n-input:disabled,input[type=password].n-input.n-input-status\:disabled,input[type=password].n-input:disabled,input[type=search].n-input.n-input-status\:disabled,input[type=search].n-input:disabled,input[type=tel].n-input.n-input-status\:disabled,input[type=tel].n-input:disabled,input[type=text].n-input.n-input-status\:disabled,input[type=text].n-input:disabled,input[type=url].n-input.n-input-status\:disabled,input[type=url].n-input:disabled,textarea.n-input.n-input-status\:disabled,textarea.n-input:disabled{background-color:rgba(var(--rgb-base-2),.6);border-color:var(--color-base-4);color:rgba(var(--rgb-base-10),.27);cursor:not-allowed}.n-input::placeholder{color:var(--color-base-5);font-size:var(--font-size-2);font-weight:var(--font-weight-1);letter-spacing:-.02em;line-height:150%}.n-input.n-input-status\:disabled::placeholder,.n-input:disabled::placeholder{color:rgba(var(--rgb-base-10),.27)}label:has(+.n-input){align-items:center;display:flex;font-size:var(--font-size-2);font-weight:var(--font-weight-2);letter-spacing:-.02em;line-height:150%;margin-right:var(--gap-2)}.n-input+label{align-items:center;display:flex;font-size:var(--font-size-2);font-weight:var(--font-weight-2);letter-spacing:-.02em;line-height:150%;margin-left:var(--gap-2)}label:has(.n-input){align-items:center;display:flex;font-size:var(--font-size-2);font-weight:var(--font-weight-2);gap:var(--gap-2);letter-spacing:-.02em;line-height:150%;width:100%}label:has(.n-input.n-input-label\:top){align-items:start;flex-direction:column;gap:var(--gap-1)}label:has(.n-input.n-input-label\:bottom){align-items:start;flex-direction:column-reverse;gap:var(--gap-1)}:is(.n-header,.n-header\:sticky){--header-height:64px;--header-border-width:1px;--header-border-color:var(--color-base-3);--header-padding:var(--spacing-4);align-items:center;box-shadow:1px 1px 1px var(--header-border-color,--color-base-3);display:flex;flex-direction:row;flex-shrink:0;grid-area:header;height:var(--header-height,64px);justify-content:start;padding:0 var(--header-padding,var(--spacing-4));position:relative;>:is(h1,.title){font-size:24px;font-weight:700}>:is(.nav,nav){display:flex;position:absolute;right:var(--spacing-4);>ul{align-items:center;display:flex;>li>a{vertical-align:top}}>ul.hide{display:none}>ul.show{display:flex}}>.content{align-items:center;display:flex;flex-direction:row;justify-content:start;margin:0 auto;max-width:var(--header-content-width,1200px);position:relative;width:100%;>:is(h1,.title){font-size:24px;font-weight:700}>:is(.nav,nav){display:flex;position:absolute;right:0;>ul{align-items:center;display:flex;>li>a{vertical-align:top}}}>ul.hide{display:none}>ul.show{display:flex}}}.n-header\:sticky{position:sticky;top:0;width:100%;z-index:1000}.n-header.content-pos\:left{>.content{margin:initial}}.n-header.content-pos\:center{>.content{margin:0 auto}}.n-header.content-pos\:right{>.content{margin:0 0 0 auto}}.n-header.menu-pos\:right{>:is(.nav,nav){left:auto;right:var(--spacing-4)}>.content{>:is(.nav,nav){left:auto;right:0}}}.n-header.menu-pos\:left{>:is(.nav,nav){left:0;right:auto}>.content{>:is(.nav,nav){left:0;right:auto}}}.n-header.logo-pos\:left{>.title,>h1{margin:0 auto 0 0}>.content{>:is(.title,h1){margin:0 auto 0 0}}}.n-header.logo-pos\:center{>.title,>h1{margin:0 auto}>.content{>:is(.title,h1){margin:0 auto}}}.n-header.logo-pos\:right{>.title,>h1{margin:0 0 0 auto}>.content{>.title,>h1{margin:0 0 0 auto}}}.n-header .mobile-menu{background:var(--color-base-1);border:1px solid var(--color-base-3);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:none;min-width:200px;position:absolute;right:0;top:100%;z-index:1001}.n-header .mobile-menu.is\:open{display:flex;flex-direction:column}.n-header .mobile-menu-header{align-items:center;display:flex;justify-content:flex-end;padding:.5rem}.n-header .mobile-menu-title{font-size:1.25rem;font-weight:600;margin:0}.n-header .mobile-menu-content{padding:1rem}.n-header .mobile-menu\:1{background:var(--color-base-1);border:1px solid var(--color-base-3);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:none;min-width:200px;position:absolute;right:0;top:100%;z-index:1001}.n-header .mobile-menu\:1.is\:open{display:flex;flex-direction:column}.n-header .mobile-menu\:2{background:var(--color-base-1);border-top:1px solid var(--color-base-3);bottom:0;box-shadow:0 -4px 12px rgba(0,0,0,.15);left:0;padding:1rem;position:fixed;right:0;transform:translateY(100%);transition:transform .3s ease;z-index:1001}.n-header .mobile-menu\:2.is\:open{transform:translateY(0)}.n-header .mobile-menu\:3{background:rgba(0,0,0,.8);bottom:0;display:none;flex-direction:column;left:0;position:fixed;right:0;top:0;z-index:1001}.n-footer,.n-header .mobile-menu\:3.is\:open{display:flex}.n-footer{border-top:var(--border-width,1px) solid var(--border-color,--color-base-3);flex-direction:column;flex-shrink:0;height:var(--footer-height,auto);padding:var(--footer-padding,var(--gap-5))}.n-modal{--modal-border-radius:16px;--modal-border:none;--modal-box-shadow:rgba(0,0,0,.08) 0 16px 20px -4px,rgba(0,0,0,.03) 0 8px 8px -4px;--modal-z-index:1200;background-color:rgba(0,0,0,.5);background-color:var(--color-base-1);border:var(--modal-border);border-radius:var(--modal-border-radius);box-shadow:var(--modal-box-shadow);content:"";height:100vh;left:0;max-width:90vw;padding:16px 24px;position:fixed;position:fixed;right:50%;top:0;top:50%;transform:translate(50%,-50%);width:100vw;z-index:var(--modal-z-index,10);z-index:var(--modal-z-index)}.n-toggle{--toggle-slide-background-color:rgba(var(--rgb-base-10),0.12);--toggle-slide-background-color-checked:var(--color-main-2);--toggle-slide-circle-color:var(--color-base-1);--toggle-slide-circle-color-checked:var(--color-base-1);--toggle-check-border-color:var(--color-base-3);--toggle-check-bagkground-color:var(--color-base-1);--toggle-check-background-color-checked:var(--color-main-2);--toggle-dot-border-color:var(--color-base-3);--toggle-dot-background-color:var(--color-base-1);--toggle-dot-border-color-checked:var(--color-main-2);--toggle-dot-background-color-checked:var(--color-main-2);--toggle-outline-color:rgba(var(--rgb-base-10),0.85);--toggle-outline-background-color:var(--color-base-1);--toggle-outline-border-color:var(--color-base-3);--toggle-outline-color-checked:var(--color-base-1);--toggle-outline-background-color-checked:var(--color-main-2);--toggle-outline-border-color-checked:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;display:inline-block}.n-toggle:before{content:""}.n-toggle,.n-toggle-type\:slide,.n-toggle\:slide{background-color:var(--toggle-slide-background-color);border-radius:9999px;height:24px;min-width:44px;position:relative;transition:background-color .3s ease;width:44px}.n-toggle-type\:slide:before,.n-toggle:before,.n-toggle\:slide:before{background-color:var(--toggle-slide-circle-color);border-radius:9999px;box-shadow:0 0 2px 0 rgba(var(--rgb-base-10),.12);height:20px;left:2px;position:absolute;top:2px;transition:all .3s cubic-bezier(.3,1.3,.7,1);width:20px}.n-toggle-type\:slide:checked,.n-toggle.n-toggle-status\:checked,.n-toggle:checked,.n-toggle\:slide:checked{background-color:var(--toggle-slide-background-color-checked)}.n-toggle-type\:slide.n-toggle-status\:checked:before,.n-toggle-type\:slide:checked:before,.n-toggle.n-toggle-status\:checked:before,.n-toggle:checked:before,.n-toggle\:slide.n-toggle-status\:checked:before,.n-toggle\:slide:checked:before{background-color:var(--toggle-slide-circle-color-checked);left:22px;-webkit-mask-image:none;mask-image:none}.n-toggle-size\:1{height:20px;min-width:36px;width:36px}.n-toggle-size\:1:before{height:16px;width:16px}.n-toggle-size\:1.n-toggle-status\:checked:before,.n-toggle-size\:1:checked:before{left:18px}.n-toggle-size\:2{height:24px;min-width:44px;width:44px}.n-toggle-size\:2:before{height:20px;width:20px}.n-toggle-size\:2.n-toggle-status\:checked:before,.n-toggle-size\:2:checked:before{left:22px}.n-toggle-size\:3{height:28px;min-width:52px;width:52px}.n-toggle-size\:3:before{height:24px;width:24px}.n-toggle-size\:3.n-toggle-status\:checked:before,.n-toggle-size\:3:checked:before{left:26px}.n-toggle.n-toggle-status\:disabled,.n-toggle:checked.n-toggle-status\:disabled,.n-toggle:checked:disabled,.n-toggle:disabled{background-color:rgba(var(--rgb-base-10),.05);cursor:not-allowed}.n-toggle-type\:check,.n-toggle-type\:check-box,.n-toggle\:check,.n-toggle\:check-box{background-color:var(--toggle-check-bagkground-color);border:1px solid var(--toggle-check-border-color);border-radius:4px;display:inline-block;height:20px;min-width:20px;transition:initial;width:20px}.n-toggle-type\:check-box:before,.n-toggle-type\:check:before,.n-toggle\:check-box:before,.n-toggle\:check:before{background-color:initial;box-shadow:none;height:inherit;position:static;transition:initial;width:inherit}.n-toggle-type\:check-box.n-toggle-status\:checked,.n-toggle-type\:check-box:checked,.n-toggle-type\:check.n-toggle-status\:checked,.n-toggle-type\:check:checked,.n-toggle\:check-box.n-toggle-status\:checked,.n-toggle\:check-box:checked,.n-toggle\:check.n-toggle-status\:checked,.n-toggle\:check:checked{background-color:var(--color-main-2)}.n-toggle-type\:check-box.n-toggle-status\:checked:before,.n-toggle-type\:check-box:checked:before,.n-toggle-type\:check.n-toggle-status\:checked:before,.n-toggle-type\:check:checked:before,.n-toggle\:check-box.n-toggle-status\:checked:before,.n-toggle\:check-box:checked:before,.n-toggle\:check.n-toggle-status\:checked:before,.n-toggle\:check:checked:before{background-color:var(--color-base-1);border-radius:initial;content:"";display:inline-block;height:inherit;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23250518' viewBox='0 0 256 256'%3E%3Cpath d='m232.49 80.49-128 128a12 12 0 0 1-17 0l-56-56a12 12 0 1 1 17-17L96 183 215.51 63.51a12 12 0 0 1 17 17Z'/%3E%3C/svg%3E");mask-position:center;mask-repeat:no-repeat;mask-size:20px 20px;width:inherit}.n-toggle-type\:check-box.n-toggle-size\:1,.n-toggle-type\:check.n-toggle-size\:1,.n-toggle\:check-box.n-toggle-size\:1,.n-toggle\:check.n-toggle-size\:1{height:16px;min-width:16px;width:16px}.n-toggle-type\:check-box.n-toggle-size\:1:before,.n-toggle-type\:check.n-toggle-size\:1:before,.n-toggle\:check-box.n-toggle-size\:1:before,.n-toggle\:check.n-toggle-size\:1:before{-webkit-mask-size:14px 14px;mask-size:14px 14px}.n-toggle-type\:check-box.n-toggle-size\:2,.n-toggle-type\:check.n-toggle-size\:2,.n-toggle\:check-box.n-toggle-size\:2,.n-toggle\:check.n-toggle-size\:2{height:24px;width:24px}.n-toggle-type\:check-box.n-toggle-size\:2:before,.n-toggle-type\:check.n-toggle-size\:2:before,.n-toggle\:check-box.n-toggle-size\:2:before,.n-toggle\:check.n-toggle-size\:2:before{-webkit-mask-size:20px 20px;mask-size:20px 20px}.n-toggle-type\:check-box.n-toggle-size\:3,.n-toggle-type\:check.n-toggle-size\:3,.n-toggle\:check-box.n-toggle-size\:3,.n-toggle\:check.n-toggle-size\:3{height:32px;min-width:32px;width:32px}.n-toggle-type\:check-box.n-toggle-size\:3:before,.n-toggle-type\:check.n-toggle-size\:3:before,.n-toggle\:check-box.n-toggle-size\:3:before,.n-toggle\:check.n-toggle-size\:3:before{-webkit-mask-size:28px 28px;mask-size:28px 28px}.n-toggle-type\:check-box.n-toggle-status\:disabled,.n-toggle-type\:check-box:checked:disabled,.n-toggle-type\:check-box:disabled,.n-toggle-type\:check.n-toggle-status\:disabled,.n-toggle-type\:check:checked:disabled,.n-toggle-type\:check:disabled,.n-toggle\:check-box.n-toggle-status\:disabled,.n-toggle\:check-box:checked:disabled,.n-toggle\:check-box:disabled,.n-toggle\:check.n-toggle-status\:disabled,.n-toggle\:check:checked:disabled,.n-toggle\:check:disabled{background-color:rgba(var(--rgb-base-10),.05);border:1px solid rgba(var(--rgb-base-10),.27);cursor:not-allowed}.n-toggle-type\:check-box.n-toggle-status\:checked.n-toggle-status\:disabled:before,.n-toggle-type\:check-box.n-toggle-status\:checked:disabled:before,.n-toggle-type\:check-box:checked.n-toggle-status\:disabled:before,.n-toggle-type\:check-box:checked:disabled:before,.n-toggle-type\:check.n-toggle-status\:checked.n-toggle-status\:disabled:before,.n-toggle-type\:check.n-toggle-status\:checked:disabled:before,.n-toggle-type\:check:checked.n-toggle-status\:disabled:before,.n-toggle-type\:check:checked:disabled:before,.n-toggle\:check-box.n-toggle-status\:checked.n-toggle-status\:disabled:before,.n-toggle\:check-box.n-toggle-status\:checked:disabled:before,.n-toggle\:check-box:checked.n-toggle-status\:disabled:before,.n-toggle\:check-box:checked:disabled:before,.n-toggle\:check.n-toggle-status\:checked.n-toggle-status\:disabled:before,.n-toggle\:check.n-toggle-status\:checked:disabled:before,.n-toggle\:check:checked.n-toggle-status\:disabled:before,.n-toggle\:check:checked:disabled:before{background-color:rgba(var(--rgb-base-10),.27);box-sizing:border-box;left:-1px;position:absolute;top:-1px}.n-toggle-type\:dot,.n-toggle\:dot{align-items:center;background-color:var(--toggle-dot-background-color);border:.7px solid var(--toggle-dot-border-color);border-radius:9999px;display:inline-flex;height:24px;justify-content:center;min-width:24px;position:static;transition:initial;width:24px}.n-toggle-type\:dot:before,.n-toggle\:dot:before{background-color:initial;box-shadow:none;height:16px;position:static;transition:initial;width:16px}.n-toggle-type\:dot.n-toggle-status\:checked,.n-toggle-type\:dot:checked,.n-toggle-type\:dot:has(input:checked),.n-toggle\:dot.n-toggle-status\:checked,.n-toggle\:dot:checked,.n-toggle\:dot:has(input:checked){background-color:initial;border-color:var(--toggle-dot-border-color-checked)}.n-toggle-type\:dot.n-toggle-status\:checked:before,.n-toggle-type\:dot:checked:before,.n-toggle-type\:dot:has(input:checked):before,.n-toggle\:dot.n-toggle-status\:checked:before,.n-toggle\:dot:checked:before,.n-toggle\:dot:has(input:checked):before{background-color:var(--toggle-dot-background-color-checked);border-radius:9999px;box-shadow:none;content:"";display:block;height:16px;position:static;width:16px}.n-toggle-type\:dot.n-toggle-size\:1,.n-toggle\:dot.n-toggle-size\:1{height:20px;min-width:20px;width:20px}.n-toggle-type\:dot.n-toggle-size\:1:before,.n-toggle\:dot.n-toggle-size\:1:before{height:12px;width:12px}.n-toggle-type\:dot.n-toggle-size\:2,.n-toggle\:dot.n-toggle-size\:2{height:24px;min-width:24px;width:24px}.n-toggle-type\:dot.n-toggle-size\:2:before,.n-toggle\:dot.n-toggle-size\:2:before{height:16px;width:16px}.n-toggle-type\:dot.n-toggle-size\:3,.n-toggle\:dot.n-toggle-size\:3{height:28px;min-width:28px;width:28px}.n-toggle-type\:dot.n-toggle-size\:3:before,.n-toggle\:dot.n-toggle-size\:3:before{height:20px;width:20px}.n-toggle-type\:dot.n-toggle-status\:disabled,.n-toggle-type\:dot:checked:disabled,.n-toggle-type\:dot:disabled,.n-toggle\:dot.n-toggle-status\:disabled,.n-toggle\:dot:checked:disabled,.n-toggle\:dot:disabled{background-color:rgba(var(--rgb-base-10),.05);border:1px solid rgba(var(--rgb-base-10),.27);cursor:not-allowed}.n-toggle-type\:dot.n-toggle-status\:checked.n-toggle-status\:disabled:before,.n-toggle-type\:dot.n-toggle-status\:checked:disabled:before,.n-toggle-type\:dot:checked.n-toggle-status\:disabled:before,.n-toggle-type\:dot:checked:disabled:before,.n-toggle\:dot.n-toggle-status\:checked.n-toggle-status\:disabled:before,.n-toggle\:dot.n-toggle-status\:checked:disabled:before,.n-toggle\:dot:checked.n-toggle-status\:disabled:before,.n-toggle\:dot:checked:disabled:before{background-color:rgba(var(--rgb-base-10),.27)}.n-toggle-type\:outline,.n-toggle-type\:outline-box,.n-toggle\:outline,.n-toggle\:outline-box{align-items:center;background-color:var(--toggle-outline-background-color);border:1px solid var(--toggle-outline-border-color);border-radius:8px;color:var(--toggle-outline-color);display:inline-flex;font-family:inherit;font-size:14px;font-weight:500;height:32px;justify-content:center;padding-left:12px;padding-right:12px;transition:initial;user-select:none;white-space:nowrap;width:fit-content}.n-toggle-type\:outline-box:before,.n-toggle-type\:outline:before,.n-toggle\:outline-box:before,.n-toggle\:outline:before{background-color:initial;box-shadow:none;height:inherit;position:static;transition:initial;width:inherit}.n-toggle-type\:outline-box.n-toggle-status\:checked,.n-toggle-type\:outline-box:checked,.n-toggle-type\:outline-box:has(input:checked),.n-toggle-type\:outline.n-toggle-status\:checked,.n-toggle-type\:outline:checked,.n-toggle-type\:outline:has(input:checked),.n-toggle\:outline-box.n-toggle-status\:checked,.n-toggle\:outline-box:checked,.n-toggle\:outline-box:has(input:checked),.n-toggle\:outline.n-toggle-status\:checked,.n-toggle\:outline:checked,.n-toggle\:outline:has(input:checked){background-color:var(--toggle-outline-background-color-checked);border-color:var(--toggle-outline-border-color-checked);color:var(--toggle-outline-color-checked)}.n-toggle-type\:outline-box.n-toggle-size\:1,.n-toggle-type\:outline.n-toggle-size\:1,.n-toggle\:outline-box.n-toggle-size\:1,.n-toggle\:outline.n-toggle-size\:1{height:24px;padding-left:8px;padding-right:8px}.n-toggle-type\:outline-box.n-toggle-size\:2,.n-toggle-type\:outline.n-toggle-size\:2,.n-toggle\:outline-box.n-toggle-size\:2,.n-toggle\:outline.n-toggle-size\:2{height:32px;padding-left:12px;padding-right:12px}.n-toggle-type\:outline-box.n-toggle-size\:3,.n-toggle-type\:outline.n-toggle-size\:3,.n-toggle\:outline-box.n-toggle-size\:3,.n-toggle\:outline.n-toggle-size\:3{font-size:16px;font-weight:500;height:40px;padding-left:16px;padding-right:16px}.n-toggle-type\:outline-box.n-toggle-status\:disabled,.n-toggle-type\:outline-box:has(input:checked).n-toggle-status\:disabled,.n-toggle-type\:outline-box:has(input:disabled),.n-toggle-type\:outline.n-toggle-status\:disabled,.n-toggle-type\:outline:has(input:checked).n-toggle-status\:disabled,.n-toggle-type\:outline:has(input:disabled),.n-toggle\:outline-box.n-toggle-status\:disabled,.n-toggle\:outline-box:has(input:checked).n-toggle-status\:disabled,.n-toggle\:outline-box:has(input:disabled),.n-toggle\:outline.n-toggle-status\:disabled,.n-toggle\:outline:has(input:checked).n-toggle-status\:disabled,.n-toggle\:outline:has(input:disabled){background-color:rgba(var(--rgb-base-10),.05);border-color:transparent;color:rgba(var(--rgb-base-10),.27);cursor:not-allowed}label:has(.n-toggle){align-items:center;display:flex;font-size:var(--font-size-5);font-weight:var(--font-weight-1);gap:var(--gap-2);letter-spacing:-.02em;line-height:150%;width:fit-content}label:has(.n-toggle.n-toggle-label\:top){align-items:start;flex-direction:column}label:has(.n-toggle.n-toggle-label\:bottom){align-items:start;flex-direction:column-reverse}:is(.n-heading\:1,.n-heading\:2,.n-heading\:3,.n-heading\:4,.n-heading\:5,.n-heading\:6,.n-heading\:2em,.n-heading\:1\.5em,.n-heading\:1\.33em,.n-heading\:1em,.n-heading\:0\.83em,.n-heading\:0\.67em){--heading-font-size:2em;font-size:var(--heading-font-size);font-weight:700;unicode-bidi:isolate}.n-message\:error-1,.n-message\:error-2,.n-message\:error-3,.n-message\:error-4,.n-message\:error-5,.n-message\:error-6,.n-message\:error-7{--heading-font-size:1em;color:var(--color-main-3);font-size:var(--heading-font-size);font-weight:700;unicode-bidi:isolate}.n-heading\:1,.n-message\:error-1{--heading-font-size:26px}.n-heading\:2,.n-message\:error-2{--heading-font-size:24px}.n-heading\:3,.n-message\:error-3{--heading-font-size:22px}.n-heading\:4,.n-message\:error-4{--heading-font-size:20px}.n-heading\:5,.n-message\:error-5{--heading-font-size:18px}.n-heading\:6,.n-message\:error-6{--heading-font-size:16px}.n-heading\:7,.n-message\:error-7{--heading-font-size:14px}.n-heading\:8,.n-message\:error-8{--heading-font-size:12px}.n-heading\:2em,.n-message\:error-2em{--heading-font-size:2em}.n-heading\:1\.5em,.n-message\:error-1\.5em{--heading-font-size:1.5em}.n-heading\:1\.33em,.n-message\:error-1\.33em{--heading-font-size:1.33em}.n-heading\:1\.17em,.n-message\:error-1\.17em{--heading-font-size:1.17em}.n-heading\:1em,.n-message\:error-1em{--heading-font-size:1em}.n-heading\:0\.83em,.n-message\:error-0\.83em{--heading-font-size:0.83em}.n-heading\:0\.67em,.n-message\:error-0\.67em{--heading-font-size:0.67em}.n-heading-truncate{word-wrap:normal;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;>a{word-wrap:normal;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.n-heading-overflow-clamp{text-wrap:nowrap;-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box;overflow:hidden;width:100%}.n-table{--n-table-bg-color:var(--color-base-1);background-color:var(--n-table-bg-color);border-collapse:collapse;table-layout:fixed;width:100%;>thead{--n-thead-bg-color:var(--color-base-2);background-color:var(--n-thead-bg-color)}>:is(thead,tbody)>tr{--n-tr-height:40px;--n-tr-border-color:var(--color-base-3);border-top:1px solid var(--n-tr-border-color);height:var(--n-tr-height);position:relative}>:is(thead,tbody)>tr>:is(th,td){text-align:center;vertical-align:middle;img,input{vertical-align:middle}&:has(img){padding:8px}}>tbody>tr:nth-child(odd):has(.n-row-expander:checked)
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");:root{--header-height:64px;--footer-height:120px;--background-color:var(--color-base-1);--text-color:var(--color-base-9);--border-color:var(--color-base-4);--border-width:1px}@media (prefers-color-scheme:dark){:root{--border-color:var(--color-base-7);--border-width:0.5px;--background-color:var(--color-base-9);--text-color:var(--color-base-2)}}html:has(.n-layout){height:100%}body:has(.n-layout){height:100%}.n-layout{display:grid;grid-template-areas:"header" "main" "footer";grid-template-columns:1fr;grid-template-rows:min-content 1fr min-content;height:100%;min-height:100vh;overflow-x:hidden;&>:where(header,.n-header,*>.n-header){box-shadow:1px 1px 1px var(--border-color,--color-base-3);grid-area:header;height:var(--header-height,64px)}&>:where(main,.n-main,*>.n-main){grid-area:main}&>:where(footer,.n-footer,*>.n-footer){border-top:1px solid var(--border-color,--color-base-3);grid-area:footer;height:var(--footer-height,120px)}&:has(>aside,>.n-aside){grid-template-areas:"header header" "aside main" "footer footer";grid-template-columns:min-content 1fr;overflow-x:hidden;position:relative;transition:grid-template-columns .5s ease;transition:grid-template-areas .5s ease;will-change:grid-template-columns,grid-template-areas;&>:where(aside,.n-aside,*>.n-aside){border-right:1px solid var(--border-color,--color-base-3);grid-area:aside;position:relative;resize:horizontal;transition:transform .5s ease;will-change:transform}&.layout-aside-width\:responsive:not(.layout-aside-width\:resizable)
|
|
2
|
+
&>:where(aside,.n-aside,*>.n-aside){transition:width .5s ease;width:100%}&.layout-aside-width\:min-content:not(.layout-aside-width\:resizable)
|
|
3
|
+
&>:where(aside,.n-aside,*>.n-aside){width:min-content}&.layout-aside-width\:slide-out{grid-template-columns:0 1fr;overflow-x:hidden;transition:grid-template-columns .5s ease;&>:where(aside,.n-aside,*>.n-aside){overflow:hidden;pointer-events:none;transform:translateX(-100%);z-index:-1}}&.layout-aside-width\:resizable>:where(aside,.n-aside,*>.n-aside):after{background-image:linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,var(--color-base-4) 0,var(--color-base-4) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 8px,1px 8px,1px 100%;content:"";cursor:ew-resize;height:100%;position:absolute;right:-2px;top:0;transition:background-image .2s ease;width:4px;z-index:10}&.layout-aside\:resizable>:where(aside,.n-aside,*>.n-aside):hover:after{background-image:linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,var(--color-base-6) 0,var(--color-base-6) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 6px,1px 6px,1px 100%}&.layout-aside\:resizable>:where(aside,.n-aside,*>.n-aside).resizing:after{background-image:linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,var(--color-main-1) 0,var(--color-main-1) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 4px,1px 4px,1px 100%}&.layout-aside-pos\:right{grid-template-areas:"header header" "main aside" "footer footer";grid-template-columns:1fr min-content;overflow-x:hidden;&>:where(aside,.n-aside,*>.n-aside){border-left:1px solid var(--border-color,--color-base-3);border-right:none}&.layout-aside-width\:slide-out{grid-template-columns:1fr 0;overflow-x:hidden;transition:grid-template-columns .5s ease;&>:where(aside,.n-aside,*>.n-aside){overflow:hidden;pointer-events:none;transform:translateX(100%);z-index:-1}}&.layout-aside-width\:resizable>:where(aside,.n-aside,*>.n-aside):after{background-image:linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,var(--color-base-4) 0,var(--color-base-4) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 8px,1px 8px,1px 100%;left:-2px;right:auto}&.layout-aside-width\:resizable>:where(aside,.n-aside,*>.n-aside):hover:after{background-image:linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,var(--color-base-6) 0,var(--color-base-6) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 6px,1px 6px,1px 100%}&.layout-aside-width\:resizable>:where(aside,.n-aside,*>.n-aside).resizing:after{background-image:linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,var(--color-main-1) 0,var(--color-main-1) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 4px,1px 4px,1px 100%}}}}@media (max-width:640px){.n-layout:has(>aside,>.n-aside).layout-aside-pos\:right{&.layout-aside-width\:responsive{grid-template-areas:"header header" "main aside" "footer footer";grid-template-columns:1fr min-content}}}.n-layout{&>.n-header:has(.n-aside-toggle:checked)~:where(aside,.n-aside,*>aside,*>.n-aside){background-color:var(--background-color,--color-base-1);height:100%;left:0;position:absolute;top:0;transform:translateX(-100%)}}@media (max-width:640px){.n-layout{&.layout-aside-width\:responsive{grid-template-areas:"header header" "aside main" "footer footer";grid-template-columns:min-content 1fr}}}.n-section{--padding:var(--space-4);--gap:var(--space-4);--bd-color:var(--color-base-5);--bd-color-hover:var(--color-base-8);--bd-width:1px;--bd-radius:var(--space-3);--title-color:var(--color-base-7);--title-size:var(--size-8);--title-fw:var(--font-weight-7);--bg-color-glass:rgba(var(--rgb-base-2),0.4);--bg-color-glass-hover:rgba(var(--rgb-base-4),0.4)}@media (prefers-color-scheme:dark){.n-section{--title-color:var(--color-base-1);--bd-color:var(--color-base-6);--bd-color-hover:var(--color-base-2);--bd-width:0.5px;--bg-color-glass:rgba(var(--rgb-base-8),0.4);--bg-color-glass-hover:rgba(var(--rgb-base-8),0.6)}}.n-section{display:flex;flex-direction:column;overflow:clip;&.hover:hover{cursor:pointer}&.section\:card{border:var(--bd-width) solid var(--bd-color);border-radius:var(--bd-radius);&.hover:hover{border:var(--border-width-1) solid var(--bd-color-hover)}}&.section\:glass{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--bg-color-glass);transition:background .3s ease,backdrop-filter .3s ease,border .3s ease;&.hover:hover{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--bg-color-glass-hover)}}&.section\:elevated{box-shadow:var(--shadow-lg);&.hover:hover{box-shadow:var(--shadow-xl)}}&>h1,&>header{border-bottom:var(--bd-width) solid var(--bd-color);max-width:100%;min-width:0;overflow:hidden;padding:var(--padding);text-overflow:ellipsis;white-space:nowrap;width:100%}&>h1,&>header,&>header>h1{align-items:center;color:var(--title-color);display:flex;font-size:var(--title-size);font-weight:var(--title-fw)}&>h1+*,&>header+*{max-height:2000px;opacity:1;overflow:hidden;padding:var(--padding);transition:max-height .6s ease,opacity .6s ease,padding .6s ease}&:has(.n-list.list-dir\:column),&:has(.n-list.list-direction\:column)>*{&>h1+*,&>header+*{padding:0}}&.content-toggle\:hide{&>h1,&>header{border-bottom:none}&>h1+*,&>header+*{max-height:0;opacity:0;padding-bottom:0;padding-top:0}}}:where(.n-frame,.n-frame\:ruled,.n-frame\:outlined){>h1,>header{align-items:center;display:flex;width:100%}>h1,>header>h1{font-size:var(--panel-header-fs,var(--font-size-7,16px));font-weight:var(--panel-header-fw,var(--font-weight-2,bold))}>:is(table,ul,dl,form,div,.content){align-items:var(--content-align,start);display:flex;flex-direction:var(--content-direction,column);justify-content:var(--content-justify,start);list-style:var(--list-style,circle);overflow:hidden;position:relative;width:var(--panel-content-width,100%);>:where(li,dt,dd,.item){align-items:start;display:flex;flex-direction:row;flex-direction:column;padding:1em 1.5em;width:100%}}}:where(.n-frame,.n-frame\:ruled,.n-frame\:outlined):has(>h1,>header){>:is(table,ul,dl,form,div,.content){padding-top:1em}}.list-title\:underline{>h1,>header{border-bottom:1px solid var(--panel-header-bd-bottom,var(--color-base-3));padding-bottom:10px}}.list-item-style\:circle{>:where(table,ul,dl,form,div,.content){list-style:var(--list-style,circle)}}.n-frame\:outlined.n-frame-item\:card{>:where(table,ul,dl,form,div,.content){>:where(li,dt,dd,section){align-items:start;flex-direction:column;padding:1em 1.5em}}}.n-frame\:outlined{>:where(table,ul,dl,form,div,.content){gap:1em;>:where(li,dt,dd,section){align-items:center;border:1px solid var(--panel-header-bd-bottom,var(--color-base-3));display:flex;min-height:40px;padding:0 10px}}}.n-frame\:outlined.outlined-gap\:1{>:where(table,ul,dl,form,div,.content){gap:var(--space-1,4px)}}.n-frame\:outlined.outlined-gap\:2{>:where(table,ul,dl,form,div,.content){gap:var(--space-2,8px)}}.n-frame\:ruled{>:where(table,ul,dl,form,div,.content){>:where(li,dt,dd){line-height:2.5em;position:relative}>:where(li,dt,dd,section):after{background-color:var(--panel-header-bd-bottom,var(--color-base-3));bottom:0;content:"";display:flex;height:1px;padding:0;position:absolute;width:100%}>:where(li,dt,dd):last-child:after{display:none;min-height:40px}}}.n-frame\:ruled:has(section):before{align-items:center;color:red;content:"ruled-list 클래스 박스 안에 section 태그를 포함할 수 없습니다.";display:flex;font-weight:700;justify-content:center;padding:20px 20px 0;width:100%}.n-form{--form-border-radius:16px;--form-padding:24px;--input-padding-x:12px;--input-input-height:36px;--input-textarea-min-height:58px;--input-border-radius:6px;--input-border-color:var(--color-base-3);--input-underline-border-width:1.6px;--input-border-color-focus:var(--color-sub-2);--input-border-color-success:#37b24d;--input-color-warning:var(--color-accent-1);--input-border-color-warning:var(--color-accent-1);display:flex;flex-direction:column;gap:var(--space-5);>div{display:flex;flex-direction:column;gap:5px;padding:5px 0;width:100%;label{display:flex;flex-direction:column;gap:5px;>span{display:inline-flex;font-weight:500;width:100%}>input[type=email],>input[type=number],>input[type=password],>input[type=search],>input[type=tel],>input[type=text],>input[type=url],>textarea{background-color:var(--color-base-1);border:1px solid var(--input-border-color);border-radius:var(--input-border-radius);box-shadow:0 1px 1.5px 0 rgba(0,0,0,.05);color:rgba(var(--rgb-base-7),.85);cursor:default;flex-grow:1;font-size:14px;line-height:150%;padding:4px var(--input-padding-x);transition:border .12s}>textarea{height:auto;min-height:100px;overflow-y:auto}}}&.n-label-pos\:left{>div{label{align-items:center;flex-direction:row;width:100%;>span{text-wrap:nowrap;display:inline-flex;justify-content:center;overflow:hidden;text-overflow:ellipsis " [..]";white-space:nowrap;width:20%}>span:after{content:" : "}input{flex-grow:1}}}}}.n-input{--input-padding-x:12px;--input-input-height:36px;--input-textarea-min-height:58px;--input-border-color:var(--color-base-3);--input-border-radius:6px;--input-underline-border-width:1.6px;--input-border-color-focus:var(--color-sub-2);--input-border-color-success:#37b24d;--input-color-warning:var(--color-accent-1);--input-border-color-warning:var(--color-accent-1)}.n-input,input[type=email].n-input,input[type=number].n-input,input[type=password].n-input,input[type=search].n-input,input[type=tel].n-input,input[type=text].n-input,input[type=url].n-input,textarea.n-input{background-color:var(--color-base-1);border:1px solid var(--input-border-color);border-radius:var(--input-border-radius);box-shadow:0 1px 1.5px 0 rgba(0,0,0,.05);color:rgba(var(--rgb-base-10),.85);padding:4px var(--input-padding-x);width:100%}.n-input,.n-input-type\:outline,.n-input\:outline,input[type=email].n-input,input[type=email].n-input-type\:outline,input[type=email].n-input\:outline,input[type=number].n-input,input[type=number].n-input-type\:outline,input[type=number].n-input\:outline,input[type=password].n-input,input[type=password].n-input-type\:outline,input[type=password].n-input\:outline,input[type=search].n-input,input[type=search].n-input-type\:outline,input[type=search].n-input\:outline,input[type=tel].n-input,input[type=tel].n-input-type\:outline,input[type=tel].n-input\:outline,input[type=text].n-input,input[type=text].n-input-type\:outline,input[type=text].n-input\:outline,input[type=url].n-input,input[type=url].n-input-type\:outline,input[type=url].n-input\:outline{height:var(--input-input-height)}.n-input-type\:underline,.n-input\:underline,input[type=email].n-input-type\:underline,input[type=email].n-input\:underline,input[type=number].n-input-type\:underline,input[type=number].n-input\:underline,input[type=password].n-input-type\:underline,input[type=password].n-input\:underline,input[type=search].n-input-type\:underline,input[type=search].n-input\:underline,input[type=tel].n-input-type\:underline,input[type=tel].n-input\:underline,input[type=text].n-input-type\:underline,input[type=text].n-input\:underline,input[type=url].n-input-type\:underline,input[type=url].n-input\:underline{background-color:transparent;border-left:none;border-radius:0;border-right:none;border-top:none;border-width:var(--input-underline-border-width);box-shadow:none;transition-duration:.2s;transition-property:border-color}textarea.n-input{height:100%;min-height:var(--input-textarea-min-height);resize:none}.n-input.n-input-status\:focus,input[type=email].n-input.n-input-status\:focus,input[type=email].n-input:focus,input[type=number].n-input.n-input-status\:focus,input[type=number].n-input:focus,input[type=password].n-input.n-input-status\:focus,input[type=password].n-input:focus,input[type=search].n-input.n-input-status\:focus,input[type=search].n-input:focus,input[type=tel].n-input.n-input-status\:focus,input[type=tel].n-input:focus,input[type=text].n-input.n-input-status\:focus,input[type=text].n-input:focus,input[type=url].n-input.n-input-status\:focus,input[type=url].n-input:focus,textarea.n-input.n-input-status\:focus,textarea.n-input:focus{border-color:var(--input-border-color-focus)}.n-input.n-input-status\:success,input[type=email].n-input.n-input-status\:success,input[type=number].n-input.n-input-status\:success,input[type=password].n-input.n-input-status\:success,input[type=search].n-input.n-input-status\:success,input[type=tel].n-input.n-input-status\:success,input[type=text].n-input.n-input-status\:success,input[type=url].n-input.n-input-status\:success,textarea.n-input.n-input-status\:success{border-color:var(--input-border-color-success)}.n-input.n-input-status\:warning,input[type=email].n-input.n-input-status\:warning,input[type=number].n-input.n-input-status\:warning,input[type=password].n-input.n-input-status\:warning,input[type=search].n-input.n-input-status\:warning,input[type=tel].n-input.n-input-status\:warning,input[type=text].n-input.n-input-status\:warning,input[type=url].n-input.n-input-status\:warning,textarea.n-input.n-input-status\:warning{border-color:var(--input-border-color-warning);color:var(--input-color-warning)}.n-input.n-input-status\:disabled,input[type=email].n-input.n-input-status\:disabled,input[type=email].n-input:disabled,input[type=number].n-input.n-input-status\:disabled,input[type=number].n-input:disabled,input[type=password].n-input.n-input-status\:disabled,input[type=password].n-input:disabled,input[type=search].n-input.n-input-status\:disabled,input[type=search].n-input:disabled,input[type=tel].n-input.n-input-status\:disabled,input[type=tel].n-input:disabled,input[type=text].n-input.n-input-status\:disabled,input[type=text].n-input:disabled,input[type=url].n-input.n-input-status\:disabled,input[type=url].n-input:disabled,textarea.n-input.n-input-status\:disabled,textarea.n-input:disabled{background-color:rgba(var(--rgb-base-2),.6);border-color:var(--color-base-4);color:rgba(var(--rgb-base-10),.27);cursor:not-allowed}.n-input::placeholder{color:var(--color-base-5);font-size:var(--font-size-2);font-weight:var(--font-weight-1);letter-spacing:-.02em;line-height:150%}.n-input.n-input-status\:disabled::placeholder,.n-input:disabled::placeholder{color:rgba(var(--rgb-base-10),.27)}label:has(+.n-input){align-items:center;display:flex;font-size:var(--font-size-2);font-weight:var(--font-weight-2);letter-spacing:-.02em;line-height:150%;margin-right:var(--space-2)}.n-input+label{align-items:center;display:flex;font-size:var(--font-size-2);font-weight:var(--font-weight-2);letter-spacing:-.02em;line-height:150%;margin-left:var(--space-2)}label:has(.n-input){align-items:center;display:flex;font-size:var(--font-size-2);font-weight:var(--font-weight-2);gap:var(--space-2);letter-spacing:-.02em;line-height:150%;width:100%}label:has(.n-input.n-input-label\:top){align-items:start;flex-direction:column;gap:var(--space-1)}label:has(.n-input.n-input-label\:bottom){align-items:start;flex-direction:column-reverse;gap:var(--space-1)}:is(.n-header,.n-header\:sticky){--header-height:64px;--header-border-width:1px;--header-border-color:var(--color-base-3);--header-padding:var(--space-4);align-items:center;box-shadow:1px 1px 1px var(--header-border-color,--color-base-3);display:flex;flex-direction:row;flex-shrink:0;grid-area:header;height:var(--header-height,64px);justify-content:start;padding:0 var(--header-padding,var(--space-4));position:relative;>:is(h1,.title){font-size:24px;font-weight:700}>:is(.nav,nav){display:flex;position:absolute;right:var(--space-4);>ul{align-items:center;display:flex;>li>a{vertical-align:top}}>ul.hide{display:none}>ul.show{display:flex}}>.content{align-items:center;display:flex;flex-direction:row;justify-content:start;margin:0 auto;max-width:var(--header-content-width,1200px);position:relative;width:100%;>:is(h1,.title){font-size:24px;font-weight:700}>:is(.nav,nav){display:flex;position:absolute;right:0;>ul{align-items:center;display:flex;>li>a{vertical-align:top}}}>ul.hide{display:none}>ul.show{display:flex}}}.n-header\:sticky{position:sticky;top:0;width:100%;z-index:1000}.n-header.content-pos\:left{>.content{margin:initial}}.n-header.content-pos\:center{>.content{margin:0 auto}}.n-header.content-pos\:right{>.content{margin:0 0 0 auto}}.n-header.menu-pos\:right{>:is(.nav,nav){left:auto;right:var(--space-4)}>.content{>:is(.nav,nav){left:auto;right:0}}}.n-header.menu-pos\:left{>:is(.nav,nav){left:0;right:auto}>.content{>:is(.nav,nav){left:0;right:auto}}}.n-header.logo-pos\:left{>.title,>h1{margin:0 auto 0 0}>.content{>:is(.title,h1){margin:0 auto 0 0}}}.n-header.logo-pos\:center{>.title,>h1{margin:0 auto}>.content{>:is(.title,h1){margin:0 auto}}}.n-header.logo-pos\:right{>.title,>h1{margin:0 0 0 auto}>.content{>.title,>h1{margin:0 0 0 auto}}}.n-header .mobile-menu{background:var(--color-base-1);border:1px solid var(--color-base-3);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:none;min-width:200px;position:absolute;right:0;top:100%;z-index:1001}.n-header .mobile-menu.is\:open{display:flex;flex-direction:column}.n-header .mobile-menu-header{align-items:center;display:flex;justify-content:flex-end;padding:.5rem}.n-header .mobile-menu-title{font-size:1.25rem;font-weight:600;margin:0}.n-header .mobile-menu-content{padding:1rem}.n-header .mobile-menu\:1{background:var(--color-base-1);border:1px solid var(--color-base-3);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:none;min-width:200px;position:absolute;right:0;top:100%;z-index:1001}.n-header .mobile-menu\:1.is\:open{display:flex;flex-direction:column}.n-header .mobile-menu\:2{background:var(--color-base-1);border-top:1px solid var(--color-base-3);bottom:0;box-shadow:0 -4px 12px rgba(0,0,0,.15);left:0;padding:1rem;position:fixed;right:0;transform:translateY(100%);transition:transform .3s ease;z-index:1001}.n-header .mobile-menu\:2.is\:open{transform:translateY(0)}.n-header .mobile-menu\:3{background:rgba(0,0,0,.8);bottom:0;display:none;flex-direction:column;left:0;position:fixed;right:0;top:0;z-index:1001}.n-footer,.n-header .mobile-menu\:3.is\:open{display:flex}.n-footer{border-top:var(--border-width,1px) solid var(--border-color,--color-base-3);flex-direction:column;flex-shrink:0;height:var(--footer-height,auto);padding:var(--footer-padding,var(--space-5))}.n-modal{--modal-border-radius:16px;--modal-border:none;--modal-box-shadow:rgba(0,0,0,.08) 0 16px 20px -4px,rgba(0,0,0,.03) 0 8px 8px -4px;--modal-z-index:1200;background-color:rgba(0,0,0,.5);background-color:var(--color-base-1);border:var(--modal-border);border-radius:var(--modal-border-radius);box-shadow:var(--modal-box-shadow);content:"";height:100vh;left:0;max-width:90vw;padding:16px 24px;position:fixed;position:fixed;right:50%;top:0;top:50%;transform:translate(50%,-50%);width:100vw;z-index:var(--modal-z-index,10);z-index:var(--modal-z-index)}:root{--heading-font-size:var(--font-size-7)}.n-heading{align-items:center;display:flex;font-size:var(--heading-font-size);font-weight:700;unicode-bidi:isolate;.heading-truncate{word-wrap:normal;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;>a{word-wrap:normal;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.heading-overflow-clamp{text-wrap:nowrap;-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box;overflow:hidden;width:100%}}.n-table{--n-table-bg-color:var(--color-base-1);background-color:var(--n-table-bg-color);border-collapse:collapse;table-layout:fixed;width:100%;>thead{--n-thead-bg-color:var(--color-base-2);background-color:var(--n-thead-bg-color)}>:is(thead,tbody)>tr{--n-tr-height:40px;--n-tr-border-color:var(--color-base-3);border-top:1px solid var(--n-tr-border-color);height:var(--n-tr-height);position:relative}>:is(thead,tbody)>tr>:is(th,td){text-align:center;vertical-align:middle;img,input{vertical-align:middle}&:has(img){padding:8px}}>tbody>tr:nth-child(odd):has(.n-row-expander:checked)
|
|
2
4
|
label:has(.n-row-expander):before{content:"\e5c5";font-family:Material Symbols Outlined;font-size:24px}>tbody>tr:nth-child(odd):has(.n-row-expander:checked)+tr{display:table-row}}.n-table\:expandable{>tbody>tr:nth-child(odd):not(:has(.n-row-expander))>td:last-child:after{align-items:center;background-color:rgba(var(--rgb-base-1),.7);color:red;content:"오류 : n-table:expandable은 n-row-expander가 필요합니다.";display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}>tbody>tr:nth-child(odd):has(.n-row-expander:checked)
|
|
3
5
|
label:has(.n-row-expander):before{content:"\e5c7";font-family:Material Symbols Outlined;font-size:24px}>tbody>tr:nth-child(odd):has(.n-row-expander:not(:checked))+tr{display:none}>tbody>tr:nth-child(odd):has(.n-row-expander:not(:checked))
|
|
4
|
-
label:has(.n-row-expander):before{content:"\e5c5"}>tbody>tr:nth-child(odd):has(.n-row-expander:checked)+tr{display:table-row;>td{line-height:normal;overflow:hidden;padding:10px;text-align:start}}}.n-list{align-items:center;display:flex;flex-direction:row;&.n-list\:left{justify-content:flex-start}&.n-list\:center{justify-content:center}&.n-list\:right{justify-content:flex-end}}.n-list\:wrap{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.n-list\:aside-menu{flex-direction:column;overflow:hidden;li{align-items:center;border:none;display:flex;flex-shrink:0;overflow:hidden;padding:10px}li.active{background-color:rgba(var(--rgb-main-1),.7);color:var(--color-base-1)}}.n-list\:dl{display:flex;flex-direction:column;>div{display:flex;flex-direction:row;padding:var(--gap-2) 0;>dt{font-weight:700;&:after{content:":"}}>dd{flex-grow:1;margin-left:var(--gap-2)}}>div:last-child{border-bottom:none}}.n-list\:dl.dl-sperator\:solid{>div{border-bottom:1px solid var(--color-base-5)}}.n-list\:dl.dl-sperator\:ruled{>div{border-bottom:1px dashed var(--color-base-5)}}@media (hover:hover) and (pointer:fine){.n-list\:aside-menu{li:hover{background-color:var(--color-base-5);color:var(--color-base-1)}}}.n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;transition:all .2s ease-in-out;visibility:visible;width:var(--icon-size);&:before{align-items:center;content:"";display:inline-flex;flex-shrink:0;font-family:Material Symbols Outlined;font-size:var(--icon-size);height:var(--icon-size);justify-content:center;overflow:hidden;vertical-align:top;width:var(--icon-size)}&.n-hover:not(.n-deco):hover{background-color:var(--color-base-3);border-radius:50%;transform:scale(1.4);&:before{transform:scale(.72)}}}.icon-style\:outlined:before{font-family:Material Symbols Outlined}.icon-style\:filled:before{font-variation-settings:"FILL" 1}.icon-style\:rounded:before{font-family:Material Symbols Rounded}.icon-style\:sharp:before{font-family:Material Symbols Sharp}.icon-color\:main-1:before{color:var(--color-main-1)}.icon-color\:main-2:before{color:var(--color-main-2)}.icon-color\:main-3:before{color:var(--color-main-3)}.icon-color\:sub-1:before{color:var(--color-sub-1)}.icon-color\:sub-2:before{color:var(--color-sub-2)}.icon-color\:sub-3:before{color:var(--color-sub-3)}.icon-color\:accent-1:before{color:var(--color-accent-1)}.icon-color\:accent-2:before{color:var(--color-accent-2)}.icon-color\:accent-3:before{color:var(--color-accent-3)}.icon-color\:base-1:before{color:var(--color-base-1)}.icon-color\:base-2:before{color:var(--color-base-2)}.icon-color\:base-3:before{color:var(--color-base-3)}.icon-color\:base-4:before{color:var(--color-base-4)}.icon-color\:base-5:before{color:var(--color-base-5)}.icon-color\:base-6:before{color:var(--color-base-6)}.icon-color\:base-7:before{color:var(--color-base-7)}.icon-color\:base-8:before{color:var(--color-base-8)}.icon-color\:base-9:before{color:var(--color-base-9)}.icon-color\:base-10:before{color:var(--color-base-10)}.icon-size\:xs{--icon-size:var(--font-size-xs)}.icon-size\:xs:before{font-size:var(--font-size-xs)}.icon-size\:sm{--icon-size:var(--font-size-sm)}.icon-size\:sm:before{font-size:var(--font-size-sm)}.icon-size\:base{--icon-size:var(--font-size-base)}.icon-size\:base:before{font-size:var(--font-size-base)}.icon-size\:lg{--icon-size:var(--font-size-lg)}.icon-size\:lg:before{font-size:var(--font-size-lg)}.icon-size\:xl{--icon-size:var(--font-size-xl)}.icon-size\:xl:before{font-size:var(--font-size-xl)}.icon-size\:2xl{--icon-size:var(--font-size-2xl)}.icon-size\:2xl:before{font-size:var(--font-size-2xl)}.icon-size\:3xl{--icon-size:var(--font-size-3xl)}.icon-size\:3xl:before{font-size:var(--font-size-3xl)}.icon-size\:4xl{--icon-size:var(--font-size-4xl)}.icon-size\:4xl:before{font-size:var(--font-size-4xl)}@media (min-width:640px){.sm\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size)}.sm\:n-icon:before{content:"\e87d";font-family:Material Symbols Outlined;font-size:var(--icon-size)}.sm\:icon-color\:main-1:before{color:var(--color-main-1)}.sm\:icon-color\:main-2:before{color:var(--color-main-2)}.sm\:icon-color\:main-3:before{color:var(--color-main-3)}.sm\:icon-color\:sub-1:before{color:var(--color-sub-1)}.sm\:icon-color\:sub-2:before{color:var(--color-sub-2)}.sm\:icon-color\:sub-3:before{color:var(--color-sub-3)}.sm\:icon-color\:accent-1:before{color:var(--color-accent-1)}.sm\:icon-color\:accent-2:before{color:var(--color-accent-2)}.sm\:icon-color\:accent-3:before{color:var(--color-accent-3)}.sm\:icon-color\:base-1:before{color:var(--color-base-1)}.sm\:icon-color\:base-2:before{color:var(--color-base-2)}.sm\:icon-color\:base-3:before{color:var(--color-base-3)}.sm\:icon-color\:base-4:before{color:var(--color-base-4)}.sm\:icon-color\:base-5:before{color:var(--color-base-5)}.sm\:icon-color\:base-6:before{color:var(--color-base-6)}.sm\:icon-color\:base-7:before{color:var(--color-base-7)}.sm\:icon-color\:base-8:before{color:var(--color-base-8)}.sm\:icon-color\:base-9:before{color:var(--color-base-9)}.sm\:icon-color\:base-10:before{color:var(--color-base-10)}.sm\:icon-size\:xs:before{font-size:var(--font-size-xs)}.sm\:icon-size\:sm:before{font-size:var(--font-size-sm)}.sm\:icon-size\:base:before{font-size:var(--font-size-base)}.sm\:icon-size\:lg:before{font-size:var(--font-size-lg)}.sm\:icon-size\:xl:before{font-size:var(--font-size-xl)}.sm\:icon-size\:2xl:before{font-size:var(--font-size-2xl)}.sm\:icon-size\:3xl:before{font-size:var(--font-size-3xl)}.sm\:icon-size\:4xl:before{font-size:var(--font-size-4xl)}}@media (min-width:768px){.md\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size)}.md\:n-icon:before{font-family:Material Symbols Outlined;font-size:var(--icon-size)}}@media (min-width:1024px){.lg\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size)}.lg\:n-icon:before{font-family:Material Symbols Outlined;font-size:var(--icon-size)}.lg\:icon-color\:main-1:before{color:var(--color-main-1)}.lg\:icon-color\:main-2:before{color:var(--color-main-2)}.lg\:icon-color\:main-3:before{color:var(--color-main-3)}.lg\:icon-color\:sub-1:before{color:var(--color-sub-1)}.lg\:icon-color\:sub-2:before{color:var(--color-sub-2)}.lg\:icon-color\:sub-3:before{color:var(--color-sub-3)}.lg\:icon-color\:accent-1:before{color:var(--color-accent-1)}.lg\:icon-color\:accent-2:before{color:var(--color-accent-2)}.lg\:icon-color\:accent-3:before{color:var(--color-accent-3)}.lg\:icon-color\:base-1:before{color:var(--color-base-1)}.lg\:icon-color\:base-2:before{color:var(--color-base-2)}.lg\:icon-color\:base-3:before{color:var(--color-base-3)}.lg\:icon-color\:base-4:before{color:var(--color-base-4)}.lg\:icon-color\:base-5:before{color:var(--color-base-5)}.lg\:icon-color\:base-6:before{color:var(--color-base-6)}.lg\:icon-color\:base-7:before{color:var(--color-base-7)}.lg\:icon-color\:base-8:before{color:var(--color-base-8)}.lg\:icon-color\:base-9:before{color:var(--color-base-9)}.lg\:icon-color\:base-10:before{color:var(--color-base-10)}.lg\:icon-size\:xs:before{font-size:var(--font-size-xs)}.lg\:icon-size\:sm:before{font-size:var(--font-size-sm)}.lg\:icon-size\:base:before{font-size:var(--font-size-base)}.lg\:icon-size\:lg:before{font-size:var(--font-size-lg)}.lg\:icon-size\:xl:before{font-size:var(--font-size-xl)}.lg\:icon-size\:2xl:before{font-size:var(--font-size-2xl)}.lg\:icon-size\:3xl:before{font-size:var(--font-size-3xl)}.lg\:icon-size\:4xl:before{font-size:var(--font-size-4xl)}}@media (min-width:1280px){.xl\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size)}.xl\:n-icon:before{font-family:Material Symbols Outlined;font-size:var(--icon-size)}.xl\:icon-color\:main-1:before{color:var(--color-main-1)}.xl\:icon-color\:main-2:before{color:var(--color-main-2)}.xl\:icon-color\:main-3:before{color:var(--color-main-3)}.xl\:icon-color\:sub-1:before{color:var(--color-sub-1)}.xl\:icon-color\:sub-2:before{color:var(--color-sub-2)}.xl\:icon-color\:sub-3:before{color:var(--color-sub-3)}.xl\:icon-color\:accent-1:before{color:var(--color-accent-1)}.xl\:icon-color\:accent-2:before{color:var(--color-accent-2)}.xl\:icon-color\:accent-3:before{color:var(--color-accent-3)}.xl\:icon-color\:base-1:before{color:var(--color-base-1)}.xl\:icon-color\:base-2:before{color:var(--color-base-2)}.xl\:icon-color\:base-3:before{color:var(--color-base-3)}.xl\:icon-color\:base-4:before{color:var(--color-base-4)}.xl\:icon-color\:base-5:before{color:var(--color-base-5)}.xl\:icon-color\:base-6:before{color:var(--color-base-6)}.xl\:icon-color\:base-7:before{color:var(--color-base-7)}.xl\:icon-color\:base-8:before{color:var(--color-base-8)}.xl\:icon-color\:base-9:before{color:var(--color-base-9)}.xl\:icon-color\:base-10:before{color:var(--color-base-10)}.xl\:icon-size\:xs:before{font-size:var(--font-size-xs)}.xl\:icon-size\:sm:before{font-size:var(--font-size-sm)}.xl\:icon-size\:base:before{font-size:var(--font-size-base)}.xl\:icon-size\:lg:before{font-size:var(--font-size-lg)}.xl\:icon-size\:xl:before{font-size:var(--font-size-xl)}.xl\:icon-size\:2xl:before{font-size:var(--font-size-2xl)}.xl\:icon-size\:3xl:before{font-size:var(--font-size-3xl)}.xl\:icon-size\:4xl:before{font-size:var(--font-size-4xl)}}.icon\:home:before{content:"\e88a"}.icon\:menu:before{content:"\e5d2"}.icon\:close:before{content:"\e5cd"}.icon\:arrow_back:before{content:"\e5c4"}.icon\:arrow_forward:before{content:"\e5c8"}.icon\:expand_more:before{content:"\e5cf"}.icon\:expand_less:before{content:"\e5ce"}.icon\:chevron_left:before{content:"\e5cb"}.icon\:chevron_right:before{content:"\e5cc"}.icon\:more_vert:before{content:"\e5d4"}.icon\:more_horiz:before{content:"\e5d3"}.icon\:refresh:before{content:"\e5d5"}.icon\:settings:before{content:"\e8b8"}.icon\:apps:before{content:"\e5c3"}.icon\:launch:before{content:"\e895"}.icon\:add:before{content:"\e145"}.icon\:remove:before{content:"\e15b"}.icon\:edit:before{content:"\e3c9"}.icon\:delete:before{content:"\e872"}.icon\:save:before{content:"\e161"}.icon\:check:before{content:"\e5ca"}.icon\:clear:before{content:"\e14c"}.icon\:cancel:before{content:"\e5c9"}.icon\:done:before{content:"\e876"}.icon\:search:before{content:"\e8b6"}.icon\:share:before{content:"\e80d"}.icon\:download:before{content:"\e2c4"}.icon\:upload:before{content:"\e2c6"}.icon\:copy:before{content:"\e14d"}.icon\:visibility:before{content:"\e8f4"}.icon\:visibility_off:before{content:"\e8f5"}.icon\:lock:before{content:"\e897"}.icon\:lock_open:before{content:"\e898"}.icon\:sync:before{content:"\e627"}.icon\:info:before{content:"\e88e"}.icon\:email:before{content:"\e0be"}.icon\:phone:before{content:"\e0cd"}.icon\:chat:before{content:"\e0b7"}.icon\:notifications:before{content:"\e7f4"}.icon\:send:before{content:"\e163"}.icon\:reply:before{content:"\e15e"}.icon\:help:before{content:"\e887"}.icon\:feedback:before{content:"\e87f"}.icon\:play_arrow:before{content:"\e037"}.icon\:pause:before{content:"\e034"}.icon\:stop:before{content:"\e047"}.icon\:volume_up:before{content:"\e050"}.icon\:volume_off:before{content:"\e04f"}.icon\:mic:before{content:"\e029"}.icon\:mic_off:before{content:"\e02b"}.icon\:folder:before{content:"\e2c7"}.icon\:folder_open:before{content:"\e2c8"}.icon\:attach_file:before{content:"\e226"}.icon\:cloud:before{content:"\e2bd"}.icon\:description:before{content:"\e873"}.icon\:person:before{content:"\e7fd"}.icon\:people:before{content:"\e7fb"}.icon\:favorite:before{content:"\e87d"}.icon\:star:before{content:"\e838"}.icon\:thumb_up:before{content:"\e8dc"}.n-btn,.n-btn\:circle,.n-btn\:rounded,.n-btn\:static{--btn-font-size:14px;--btn-border-color:var(--color-base-4);--btn-border-radius:6px;--btn-bg-color:var(--color-base-1);--btn-text-color:var(--color-base-6);--btn-padding:8px 16px;align-items:center;background-color:var(--btn-bg-color);border:1px solid var(--btn-border-color);border-radius:var(--btn-border-radius);box-sizing:border-box;color:var(--btn-text-color);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--btn-font-size,14px);font-weight:400;height:auto;justify-content:center;line-height:1.4em;padding:var(--btn-padding);position:relative;transition:background-color .15s ease,border-color .15s ease,color .15s ease;user-select:none;white-space:nowrap;width:auto;&:before{align-items:center;display:inline-flex;font-family:Material Symbols Outlined;font-size:var(--icon-size);height:var(--icon-size);justify-content:center;overflow:hidden;width:var(--icon-size)}&:hover{--btn-bg-color:var(--color-base-2);--btn-border-color:var(--color-base-5);--btn-text-color:var(--color-base-7);text-decoration:none}&:active{--btn-bg-color:var(--color-base-3)}&:focus-visible{outline:2px solid var(--color-main-1,rgba(0,123,255,.5));outline-offset:1px}}.n-btn\:rounded{border-radius:var(--btn-border-radius,8px)}.n-btn\:circle{border-radius:50%}.n-btn.n-icon:not(.n-deco){--btn-padding:4px;text-indent:-999px;&:before{text-indent:0}}.n-btn.n-icon.n-deco{text-indent:0}.btn-size\:1{--btn-padding:var(--spacing-1) calc(var(--spacing-1)*2)}.btn-size\:2{--btn-padding:var(--spacing-2) calc(var(--spacing-2)*2)}.btn-size\:3{--btn-padding:var(--spacing-3) calc(var(--spacing-3)*2)}.btn-size\:4{--btn-padding:var(--spacing-4) calc(var(--spacing-4)*2)}.btn-size\:5{--btn-padding:var(--spacing-5) calc(var(--spacing-5)*2)}.btn-size\:6{--btn-padding:var(--spacing-6) calc(var(--spacing-6)*2)}.btn-size\:7{--btn-padding:var(--spacing-7) calc(var(--spacing-7)*2)}.btn-size\:8{--btn-padding:var(--spacing-8) calc(var(--spacing-8)*2)}.btn-size\:9{--btn-padding:var(--spacing-9) calc(var(--spacing-9)*2)}.btn-size\:ex{--btn-padding:var(--spacing-20) calc(var(--spacing-20)*2)}.btn-size\:inline{line-height:1em;padding:0}.btn-size\:small{--btn-font-size:var(--font-size-xs);--btn-padding:var(--spacing-1) var(--spacing-2);line-height:1em}.btn-color\:main-1{--btn-bg-color:var(--color-main-1);--btn-border-color:var(--color-main-1);--btn-text-color:var(--color-base-1);&:hover{--btn-bg-color:var(--color-main-2);--btn-border-color:var(--color-main-2);--btn-text-color:var(--color-base-2)}&:active{--btn-bg-color:var(--color-main-3);--btn-text-color:var(--color-base-1)}}.btn-color\:main-2{--btn-bg-color:var(--color-main-2);--btn-border-color:var(--color-main-2);--btn-text-color:var(--color-base-1);&:hover{--btn-bg-color:var(--color-main-3);--btn-border-color:var(--color-main-3);--btn-text-color:var(--color-base-2)}&:active{--btn-bg-color:var(--color-main-1);--btn-text-color:var(--color-base-1)}}.btn-color\:main-3{--btn-bg-color:var(--color-main-3);--btn-border-color:var(--color-main-3);--btn-text-color:var(--color-base-1);&:hover{--btn-bg-color:var(--color-main-1);--btn-border-color:var(--color-main-1);--btn-text-color:var(--color-base-2)}&:active{--btn-bg-color:var(--color-main-2);--btn-text-color:var(--color-base-1)}}.btn-color\:sub-1{--btn-bg-color:var(--color-sub-1);--btn-border-color:var(--color-sub-1);--btn-text-color:var(--color-base-1);&:hover{--btn-bg-color:var(--color-sub-2);--btn-border-color:var(--color-sub-2);--btn-text-color:var(--color-base-2)}&:active{--btn-bg-color:var(--color-sub-3);--btn-text-color:var(--color-base-1)}}.btn-color\:sub-2{--btn-bg-color:var(--color-sub-2);--btn-border-color:var(--color-sub-2);--btn-text-color:var(--color-base-1);&:hover{--btn-bg-color:var(--color-sub-3);--btn-border-color:var(--color-sub-3);--btn-text-color:var(--color-base-2)}&:active{--btn-bg-color:var(--color-sub-1);--btn-text-color:var(--color-base-1)}}.btn-color\:sub-3{--btn-bg-color:var(--color-sub-3);--btn-border-color:var(--color-sub-3);--btn-text-color:var(--color-base-1);&:hover{--btn-bg-color:var(--color-sub-1);--btn-border-color:var(--color-sub-1);--btn-text-color:var(--color-base-2)}&:active{--btn-bg-color:var(--color-sub-2);--btn-text-color:var(--color-base-1)}}.btn-color\:accent-1{--btn-bg-color:var(--color-accent-1);--btn-border-color:var(--color-accent-1);--btn-text-color:var(--color-base-1);&:hover{--btn-bg-color:var(--color-accent-2);--btn-border-color:var(--color-accent-2);--btn-text-color:var(--color-base-2)}&:active{--btn-bg-color:var(--color-accent-3);--btn-text-color:var(--color-base-1)}}.btn-color\:accent-2{--btn-bg-color:var(--color-accent-2);--btn-border-color:var(--color-accent-2);--btn-text-color:var(--color-base-1);&:hover{--btn-bg-color:var(--color-accent-3);--btn-border-color:var(--color-accent-3);--btn-text-color:var(--color-base-2)}&:active{--btn-bg-color:var(--color-accent-1);--btn-text-color:var(--color-base-1)}}.btn-color\:accent-3{--btn-bg-color:var(--color-accent-3);--btn-border-color:var(--color-accent-3);--btn-text-color:var(--color-base-1);&:hover{--btn-bg-color:var(--color-accent-1);--btn-border-color:var(--color-accent-1);--btn-text-color:var(--color-base-2)}&:active{--btn-bg-color:var(--color-accent-2);--btn-text-color:var(--color-base-1)}}@media (min-width:640px){.md\:n-btn{--btn-font-size:14px;--btn-border-color:var(--color-base-3);--btn-border-radius:8px;--btn-bg-hover:var(--color-base-2);align-items:center;background-color:transparent;border:1px solid var(--btn-border-color,var(--color-base-3));border-radius:var(--btn-border-radius,8px);box-sizing:content-box;color:inherit;cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--btn-font-size,14px);font-weight:500;justify-content:center;line-height:1em;padding:var(--btn-padding,8px 16px);position:relative;transition:border-color .3s,background-color .3s;user-select:none;white-space:nowrap;width:auto;&:before{align-items:center;display:inline-flex;justify-content:center}}.md\:n-btn:hover{background-color:var(--btn-bg-hover,var(--color-base-2));text-decoration:none}.md\:n-btn\:static{cursor:unset}.md\:n-btn-size\:inline{line-height:1em;padding:0}.md\:n-btn-size\:small{--btn-font-size:12px;line-height:1em;padding:var(--btn-padding,4px 8px)}.md\:n-btn-size\:1{--btn-font-size:14px;padding:var(--btn-padding,8px 16px)}.md\:n-btn-size\:2{--btn-font-size:16px;padding:var(--btn-padding,10px 18px)}.md\:n-btn-size\:3{font-size:18px;padding:var(--btn-padding,12px 20px)}.md\:n-btn-size\:1:is(.n-icon){mask-size:var(--icon-size-1)}.md\:n-btn-size\:2:is(.n-icon){mask-size:var(--icon-size-2)}.md\:n-btn-size\:3:is(.n-icon){mask-size:var(--icon-size-3)}.md\:n-btn-color\:main{background-color:var(--color-main-1);border-color:var(--color-main-2);color:var(--color-base-1)}.md\:n-btn-color\:main:hover{--btn-bg-hover:var(--color-main-1)}.md\:n-btn-color\:sub{border-color:var(--color-sub-2);color:var(--color-base-1)}.md\:n-btn-color\:sub:hover{--btn-bg-hover:rgba(var(--rgb-sub-1),0.7)}.md\:n-btn-color\:accent{border-color:var(--color-accent-2);color:var(--color-base-1)}.md\:n-btn-color\:accent:hover{--btn-bg-hover:rgba(var(--rgb-accent-1),0.9)}.md\:n-btn-color\:accent:is(.n-icon):before{background-color:var(--color-base-1)}.md\:n-btn-size\:1:is(.n-icon):not(.n-deco),.md\:n-btn:is(.n-icon):not(.n-deco){--btn-padding:8px;text-indent:-999px}.md\:n-btn-size\:2:is(.n-icon):not(.n-deco){--btn-padding:10px}.md\:n-btn-size\:3:is(.n-icon):not(.n-deco){--btn-padding:12px}}@media (min-width:1024px){.lg\:n-btn{--btn-font-size:14px;--btn-border-color:var(--color-base-3);--btn-border-radius:8px;--btn-bg-hover:var(--color-base-2);align-items:center;background-color:transparent;border:1px solid var(--btn-border-color,var(--color-base-3));border-radius:var(--btn-border-radius,8px);box-sizing:content-box;color:inherit;cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--btn-font-size,14px);font-weight:500;justify-content:center;line-height:1em;padding:var(--btn-padding,8px 16px);position:relative;transition:border-color .3s,background-color .3s;user-select:none;white-space:nowrap;width:auto;&:before{align-items:center;display:inline-flex;justify-content:center}}.lg\:n-btn:hover{background-color:var(--btn-bg-hover,var(--color-base-2));text-decoration:none}.lg\:n-btn\:static{cursor:unset}.lg\:n-btn-size\:inline{line-height:1em;padding:0}.lg\:n-btn-size\:small{--btn-font-size:12px;line-height:1em;padding:var(--btn-padding,4px 8px)}.lg\:n-btn-size\:1{--btn-font-size:14px;padding:var(--btn-padding,8px 16px)}.lg\:n-btn-size\:2{--btn-font-size:16px;padding:var(--btn-padding,10px 18px)}.lg\:n-btn-size\:3{font-size:18px;padding:var(--btn-padding,12px 20px)}.lg\:n-btn-size\:1:is(.n-icon){mask-size:var(--icon-size-1)}.lg\:n-btn-size\:2:is(.n-icon){mask-size:var(--icon-size-2)}.lg\:n-btn-size\:3:is(.n-icon){mask-size:var(--icon-size-3)}.lg\:n-btn-color\:main{border-color:var(--color-main-2);color:var(--color-base-1)}.lg\:n-btn-color\:main:hover{--btn-bg-hover:var(--color-main-1)}.lg\:n-btn-color\:sub{border-color:var(--color-sub-2);color:var(--color-base-1)}.lg\:n-btn-color\:sub:hover{--btn-bg-hover:rgba(var(--rgb-sub-1),0.7)}.lg\:n-btn-color\:accent{border-color:var(--color-accent-2);color:var(--color-base-1)}.lg\:n-btn-color\:accent:hover{--btn-bg-hover:rgba(var(--rgb-accent-1),0.9)}.lg\:n-btn-size\:1:is(.n-icon):not(.n-deco),.lg\:n-btn:is(.n-icon):not(.n-deco){--btn-padding:8px;text-indent:-999px}.lg\:n-btn-size\:2:is(.n-icon):not(.n-deco){--btn-padding:10px}.lg\:n-btn-size\:3:is(.n-icon):not(.n-deco){--btn-padding:12px}}.n-active,.n-active\:color{background-color:rgba(var(--rgb-main-2),.12);color:var(--color-main-3)}.n-active:after,.n-active:before,.n-active\:color:after,.n-active\:color:before{background-color:var(--color-main-3)}.n-active\:bar{border-bottom:3px solid var(--color-main-1)}.n-active.n-active-color\:sub{background-color:rgba(var(--rgb-sub-2),.12);color:var(--color-sub-3)}.n-active.n-active-color\:sub:after,.n-active.n-active-color\:sub:before{background-color:var(--color-sub-3)}.n-active.n-active-color\:accent{background-color:rgba(var(--rgb-accent-2),.12);color:var(--color-accent-3)}.n-active.n-active-color\:accent:after,.n-active.n-active-color\:accent:before{background-color:var(--color-accent-3)}.n-active\:bar.n-active-color\:sub{border-bottom-color:var(--color-sub-2)}.n-active\:bar.n-active-color\:accent{border-bottom-color:var(--color-accent-2)}.n-icon\:expand:has(input[type=checkbox]):after,.n-icon\:expand:has(input[type=checkbox]):before{content:"\e5c5"}.n-icon\:expand:has(input[type=checkbox]:checked):after,.n-icon\:expand:has(input[type=checkbox]:checked):before{content:"\e5c7"}.expandable .n-expander{--expander-height:200px;max-height:0!important;overflow:hidden;transition:max-height 1s ease}.expandable:has(.n-icon\:expand>input:checked) .n-expander{max-height:var(--expander-height)!important}.n-deco{--deco-gap:4px;--deco-size:24px;align-items:center;display:inline-flex;gap:var(--deco-gap);justify-content:center;text-align:center;text-indent:0;width:auto;&:before{align-items:center;display:inline-flex;flex-shrink:0;font-family:Material Symbols Outlined;font-size:var(--icon-size);height:var(--icon-size);justify-content:center;overflow:hidden;width:var(--icon-size)}}.deco-pos\:bottom,.deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.deco-pos\:left:before,.deco-pos\:top:before{order:unset}.deco-pos\:bottom:before,.deco-pos\:right:before{order:1}.deco-pos\:bottom,.deco-pos\:top{width:auto}:not(.n-deco).deco-pos\:bottom,:not(.n-deco).deco-pos\:left,:not(.n-deco).deco-pos\:right,:not(.n-deco).deco-pos\:top{align-items:center;display:flex;flex-direction:row;justify-content:center;overflow:visible;position:relative}:not(.n-deco).deco-pos\:bottom:before,:not(.n-deco).deco-pos\:left:before,:not(.n-deco).deco-pos\:right:before,:not(.n-deco).deco-pos\:top:before{border:1px solid red;color:red;content:"Error: n-deco is missing.";display:flex;font-family:Arial,Helvetica,sans-serif;font-size:12px;height:100%;left:0;position:absolute;top:0;width:150px}.deco-gap\:0{--deco-gap:0px}.deco-gap\:1{--deco-gap:5px}.deco-gap\:2{--deco-gap:10px}@media screen and (min-width:576px){.sm\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var(--deco-gap);text-align:center;text-indent:0;width:auto}.sm\:deco-pos\:bottom,.sm\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.sm\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.sm\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.sm\:deco-pos\:left,.sm\:deco-pos\:top{&:before{order:unset}}.sm\:deco-pos\:bottom:before,.sm\:deco-pos\:right:before{order:1}.sm\:deco-pos\:left,.sm\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.sm\:deco-gap\:0{--deco-gap:0px}.sm\:deco-gap\:1{--deco-gap:5px}.sm\:deco-gap\:2{--deco-gap:10px}}@media screen and (min-width:768px){.md\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var(--deco-gap);text-align:center;text-indent:0;width:auto}.md\:deco-pos\:bottom,.md\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.md\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.md\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.md\:deco-pos\:left,.md\:deco-pos\:top{&:before{order:unset}}.md\:deco-pos\:bottom:before,.md\:deco-pos\:right:before{order:1}.md\:deco-pos\:left,.md\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.md\:deco-gap\:0{--deco-gap:0px}.md\:deco-gap\:1{--deco-gap:5px}.md\:deco-gap\:2{--deco-gap:10px}}@media screen and (min-width:992px){.lg\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var(--deco-gap);text-align:center;text-indent:0;width:auto}.lg\:deco-pos\:bottom,.lg\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.lg\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.lg\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.lg\:deco-pos\:left,.lg\:deco-pos\:top{&:before{order:unset}}.lg\:deco-pos\:bottom:before,.lg\:deco-pos\:right:before{order:1}.lg\:deco-pos\:left,.lg\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.lg\:deco-gap\:0{--deco-gap:0px}.lg\:deco-gap\:1{--deco-gap:5px}.lg\:deco-gap\:2{--deco-gap:10px}}@media screen and (min-width:1200px){.xl\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var (--deco-gap);text-align:center;text-indent:0;width:auto}.xl\:deco-pos\:bottom,.xl\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.xl\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.xl\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.xl\:deco-pos\:left,.xl\:deco-pos\:top{&:before{order:unset}}.xl\:deco-pos\:bottom:before,.xl\:deco-pos\:right:before{order:1}.xl\:deco-pos\:left,.xl\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.xl\:deco-gap\:0{--deco-gap:0px}.xl\:deco-gap\:1{--deco-gap:5px}.xl\:deco-gap\:2{--deco-gap:10px}}.\:hover-color\:main-1:hover{background-color:var(--color-main-1)}.\:hover-color\:main-2:hover{background-color:var(--color-main-2)}.\:hover-color\:main-3:hover{background-color:var(--color-main-3)}.\:hover-color\:sub-1:hover{background-color:var(--color-sub-1)}.\:hover-color\:sub-2:hover{background-color:var(--color-sub-2)}.\:hover-color\:sub-3:hover{background-color:var(--color-sub-3)}.\:hover-color\:base-1:hover{background-color:var(--color-base-1)}.\:hover-color\:base-2:hover{background-color:var(--color-base-2)}.\:hover-color\:base-3:hover{background-color:var(--color-base-3)}.\:hover-color\:base-4:hover{background-color:var(--color-base-4)}.\:hover-color\:base-5:hover{background-color:var(--color-base-5)}.\:hover-color\:base-6:hover{background-color:var(--color-base-6)}.\:hover-color\:base-7:hover{background-color:var(--color-base-7)}.\:hover-color\:base-8:hover{background-color:var(--color-base-8)}.\:hover-color\:base-9:hover{background-color:var(--color-base-9)}.\:hover-color\:base-10:hover{background-color:var(--color-base-10)}.\:hover-action\:show .\:hover-target{display:none}.\:hover-action\:show:hover .\:hover-target{display:flex}.\:\:before:before{background-color:var(--before-bg-color-base-6,transparent);content:"";display:flex;flex-direction:column;height:var(--before-h-1,30px)}.\:\:before-h\:2:before{--before-h-1:60px}.\:\:before-bg-color\:base-6:before{--before-bg-color-base-6:var(--color-base-6)}.\:child-hover-color\:main-1>:hover{background-color:var(--color-main-1)}.\:child-hover-color\:main-2>:hover{background-color:var(--color-main-2)}.\:child-hover-color\:main-3>:hover{background-color:var(--color-main-3)}.\:child-hover-color\:sub-1>:hover{background-color:var(--color-sub-1)}.\:child-hover-color\:sub-2>:hover{background-color:var(--color-sub-2)}.\:child-hover-color\:sub-3>:hover{background-color:var(--color-sub-3)}.\:child-hover-color\:base-1>:hover{background-color:var(--color-base-1)}.\:child-hover-color\:base-2>:hover{background-color:var(--color-base-2)}.\:child-hover-color\:base-3>:hover{background-color:var(--color-base-3)}.\:child-hover-color\:base-4>:hover{background-color:var(--color-base-4)}.\:child-hover-color\:base-5>:hover{background-color:var(--color-base-5)}.\:child-hover-color\:base-6>:hover{background-color:var(--color-base-6)}.\:child-hover-color\:base-7>:hover{background-color:var(--color-base-7)}.\:child-hover-color\:base-8>:hover{background-color:var(--color-base-8)}.\:child-hover-color\:base-9>:hover{background-color:var(--color-base-9)}.\:child-hover-color\:base-10>:hover{background-color:var(--color-base-10)}.\:child-hover-action\:show .n-hover-target{display:none}.\:child-hover-action\:show:hover .n-hover-target{display:flex}.\:\:child-before:before{background-color:var(--before-bg-color-base-6,transparent);content:"";display:flex;flex-direction:column;height:var(--before-h-1,30px)}.\:\:child-before-h\:2:before{--before-h-1:60px}.\:\:child-before-bg-color\:base-6:before{--before-bg-color-base-6:var(--color-base-6)}.n-w\:0,.n-width\:0{width:var(--width-0)}.n-w\:1,.n-width\:1{width:var(--width-1)}.n-w\:2,.n-width\:2{width:var(--width-2)}.n-w\:3,.n-width\:3{width:var(--width-3)}.n-w\:4,.n-width\:4{width:var(--width-4)}.n-w\:5,.n-width\:5{width:var(--width-5)}.n-w\:6,.n-width\:6{width:var(--width-6)}.n-w\:7,.n-width\:7{width:var(--width-7)}.n-w\:8,.n-width\:8{width:var(--width-8)}.n-w\:9,.n-width\:9{width:var(--width-9)}.n-w\:10,.n-width\:10{width:var(--width-10)}.n-w\:1p,.n-width\:1p{width:var(--width-1p)}.n-w\:2p,.n-width\:2p{width:var(--width-2p)}.n-w\:3p,.n-width\:3p{width:var(--width-3p)}.n-w\:4p,.n-width\:4p{width:var(--width-4p)}.n-w\:5p,.n-width\:5p{width:var(--width-5p)}.n-w\:6p,.n-width\:6p{width:var(--width-6p)}.n-w\:7p,.n-width\:7p{width:var(--width-7p)}.n-w\:8p,.n-width\:8p{width:var(--width-8p)}.n-w\:9p,.n-width\:9p{width:var(--width-9p)}.n-w\:10p,.n-width\:10p{width:var(--width-10p)}.n-w\:1\/2,.n-width\:1\/2{width:50%}.n-w\:1\/3,.n-width\:1\/3{width:33%}.n-w\:2\/3,.n-width\:2\/3{width:66%}.n-w\:1\/4,.n-width\:1\/4{width:25%}.n-w\:2\/4,.n-width\:2\/4{width:50%}.n-w\:3\/4,.n-width\:3\/4{width:75%}.n-w\:1\/5,.n-width\:1\/5{width:20%}.n-w\:2\/5,.n-width\:2\/5{width:40%}.n-w\:3\/5,.n-width\:3\/5{width:60%}.n-w\:4\/5,.n-width\:4\/5{width:80%}.n-w\:100p,.n-width\:100p{width:100%}.n-w\:100vw,.n-width\:100vw{width:100vw}.n-w\:100svw,.n-width\:100svw{width:100svw}.n-w\:100lvw,.n-width\:100lvw{width:100lvw}.n-w\:100dvw,.n-width\:100dvw{width:100dvw}.n-w\:min-content,.n-width\:min-content{width:min-content}.n-w\:max-content,.n-width\:max-content{width:max-content}.n-w\:fit-content,.n-width\:fit-content{width:fit-content}.n-w\:auto,.n-width\:auto{width:auto}.n-w\:small,.n-width\:small{min-width:576px}.n-w\:medium,.n-width\:medium{min-width:768px}.n-w\:large,.n-width\:large{min-width:992px}.n-w\:xlarge,.n-width\:xlarge{min-width:1200px}.n-w\:ex,.n-width\:ex{min-width:var(--width-ex)}.n-h\:0,.n-height\:0{height:var(--height-0)}.n-h\:1,.n-height\:1{height:var(--height-1)}.n-h\:2,.n-height\:2{height:var(--height-2)}.n-h\:3,.n-height\:3{height:var(--height-3)}.n-h\:4,.n-height\:4{height:var(--height-4)}.n-h\:5,.n-height\:5{height:var(--height-5)}.n-h\:6,.n-height\:6{height:var(--height-6)}.n-h\:7,.n-height\:7{height:var(--height-7)}.n-h\:8,.n-height\:8{height:var(--height-8)}.n-h\:9,.n-height\:9{height:var(--height-9)}.n-h\:10,.n-height\:10{height:var(--height-10)}.n-h\:1p,.n-height\:1p{height:var(--height-percent-1)}.n-h\:2p,.n-height\:2p{height:var(--height-percent-2)}.n-h\:3p,.n-height\:3p{height:var(--height-percent-3)}.n-h\:4p,.n-height\:4p{height:var(--height-percent-4)}.n-h\:5p,.n-height\:5p{height:var(--height-percent-5)}.n-h\:6p,.n-height\:6p{height:var(--height-percent-6)}.n-h\:7p,.n-height\:7p{height:var(--height-percent-7)}.n-h\:8p,.n-height\:8p{height:var(--height-percent-8)}.n-h\:9p,.n-height\:9p{height:var(--height-percent-9)}.n-h\:10p,.n-height\:10p{height:var(--height-percent-10)}.n-h\:1\/2,.n-height\:1\/2{height:50%}.n-h\:1\/3,.n-height\:1\/3{height:33%}.n-h\:2\/3,.n-height\:2\/3{height:66%}.n-h\:1\/4,.n-height\:1\/4{height:25%}.n-h\:2\/4,.n-height\:2\/4{height:50%}.n-h\:3\/4,.n-height\:3\/4{height:75%}.n-h\:1\/5,.n-height\:1\/5{height:20%}.n-h\:2\/5,.n-height\:2\/5{height:40%}.n-h\:3\/5,.n-height\:3\/5{height:60%}.n-h\:4\/5,.n-height\:4\/5{height:80%}.n-h\:100p,.n-height\:100p{height:100%}.n-h\:100vh,.n-height\:100vh{height:100vh}.n-h\:100svh,.n-height\:100svh{height:100svh}.n-h\:100lvh,.n-height\:100lvh{height:100lvh}.n-h\:100dvh,.n-height\:100dvh{height:100dvh}.n-h\:min-content,.n-height\:min-content{height:min-content}.n-h\:max-content,.n-height\:max-content{height:max-content}.n-h\:fit-content,.n-height\:fit-content{height:fit-content}.n-h\:auto,.n-height\:auto{height:auto}.n-h\:unset,.n-height\:unset{height:unset}.n-h\:ex,.n-height\:ex{height:var(--height-ex)}@media (min-width:576px){.sm\:n-h\:0,.sm\:n-height\:0{height:var(--height-0)}.sm\:n-h\:1,.sm\:n-height\:1{height:var(--height-1)}.sm\:n-h\:2,.sm\:n-height\:2{height:var(--height-2)}.sm\:n-h\:3,.sm\:n-height\:3{height:var(--height-3)}.sm\:n-h\:4,.sm\:n-height\:4{height:var(--height-4)}.sm\:n-h\:5,.sm\:n-height\:5{height:var(--height-5)}.sm\:n-h\:6,.sm\:n-height\:6{height:var(--height-6)}.sm\:n-h\:7,.sm\:n-height\:7{height:var(--height-7)}.sm\:n-h\:8,.sm\:n-height\:8{height:var(--height-8)}.sm\:n-h\:9,.sm\:n-height\:9{height:var(--height-9)}.sm\:n-h\:10,.sm\:n-height\:10{height:var(--height-10)}.sm\:n-h\:1p,.sm\:n-height\:1p{height:var(--height-percent-1)}.sm\:n-h\:2p,.sm\:n-height\:2p{height:var(--height-percent-2)}.sm\:n-h\:3p,.sm\:n-height\:3p{height:var(--height-percent-3)}.sm\:n-h\:4p,.sm\:n-height\:4p{height:var(--height-percent-4)}.sm\:n-h\:5p,.sm\:n-height\:5p{height:var(--height-percent-5)}.sm\:n-h\:6p,.sm\:n-height\:6p{height:var(--height-percent-6)}.sm\:n-h\:7p,.sm\:n-height\:7p{height:var(--height-percent-7)}.sm\:n-h\:8p,.sm\:n-height\:8p{height:var(--height-percent-8)}.sm\:n-h\:9p,.sm\:n-height\:9p{height:var(--height-percent-9)}.sm\:n-h\:10p,.sm\:n-height\:10p{height:var(--height-percent-10)}.sm\:n-h\:1\/2,.sm\:n-height\:1\/2{height:50%}.sm\:n-h\:1\/3,.sm\:n-height\:1\/3{height:33%}.sm\:n-h\:2\/3,.sm\:n-height\:2\/3{height:66%}.sm\:n-h\:1\/4,.sm\:n-height\:1\/4{height:25%}.sm\:n-h\:2\/4,.sm\:n-height\:2\/4{height:50%}.sm\:n-h\:3\/4,.sm\:n-height\:3\/4{height:75%}.sm\:n-h\:1\/5,.sm\:n-height\:1\/5{height:20%}.sm\:n-h\:2\/5,.sm\:n-height\:2\/5{height:40%}.sm\:n-h\:3\/5,.sm\:n-height\:3\/5{height:60%}.sm\:n-h\:4\/5,.sm\:n-height\:4\/5{height:80%}.sm\:n-h\:100p,.sm\:n-height\:100p{height:100%}.sm\:n-h\:100vh,.sm\:n-height\:100vh{height:100vh}.sm\:n-h\:100svh,.sm\:n-height\:100svh{height:100svh}.sm\:n-h\:100lvh,.sm\:n-height\:100lvh{height:100lvh}.sm\:n-h\:100dvh,.sm\:n-height\:100dvh{height:100dvh}.sm\:n-h\:min-content,.sm\:n-height\:min-content{height:min-content}.sm\:n-h\:max-content,.sm\:n-height\:max-content{height:max-content}.sm\:n-h\:fit-content,.sm\:n-height\:fit-content{height:fit-content}.sm\:n-h\:auto,.sm\:n-height\:auto{height:auto}.sm\:n-h\:unset,.sm\:n-height\:unset{height:unset}.sm\:n-h\:ex,.sm\:n-height\:ex{height:var(--height-ex)}}.n-p\:0,.n-padding\:0{padding:var(--gap-0)}.n-p\:1,.n-padding\:1{padding:var(--gap-1)}.n-p\:2,.n-padding\:2{padding:var(--gap-2)}.n-p\:3,.n-padding\:3{padding:var(--gap-3)}.n-p\:4,.n-padding\:4{padding:var(--gap-4)}.n-p\:5,.n-padding\:5{padding:var(--gap-5)}.n-p\:6,.n-padding\:6{padding:var(--gap-6)}.n-p\:7,.n-padding\:7{padding:var(--gap-7)}.n-p\:8,.n-padding\:8{padding:var(--gap-8)}.n-p\:9,.n-padding\:9{padding:var(--gap-9)}.n-p\:10,.n-padding\:10{padding:var(--gap-10)}.n-p\:10,.n-padding\:ex{padding:var(--gap-ex)}@media (min-width:576px){.sm\:n-p\:0,.sm\:n-padding\:0{padding:var(--gap-0)}.sm\:n-p\:1,.sm\:n-padding\:1{padding:var(--gap-1)}.sm\:n-p\:2,.sm\:n-padding\:2{padding:var(--gap-2)}.sm\:n-p\:3,.sm\:n-padding\:3{padding:var(--gap-3)}.sm\:n-p\:4,.sm\:n-padding\:4{padding:var(--gap-4)}.sm\:n-p\:5,.sm\:n-padding\:5{padding:var(--gap-5)}.sm\:n-p\:6,.sm\:n-padding\:6{padding:var(--gap-6)}.sm\:n-p\:7,.sm\:n-padding\:7{padding:var(--gap-7)}.sm\:n-p\:8,.sm\:n-padding\:8{padding:var(--gap-8)}.sm\:n-p\:9,.sm\:n-padding\:9{padding:var(--gap-9)}.sm\:n-p\:10,.sm\:n-padding\:10{padding:var(--gap-10)}.sm\:n-p\:10,.sm\:n-padding\:ex{padding:var(--gap-ex)}}@media (min-width:768px){.md\:n-p\:0,.md\:n-padding\:0{padding:var(--gap-0)}.md\:n-p\:1,.md\:n-padding\:1{padding:var(--gap-1)}.md\:n-p\:2,.md\:n-padding\:2{padding:var(--gap-2)}.md\:n-p\:3,.md\:n-padding\:3{padding:var(--gap-3)}.md\:n-p\:4,.md\:n-padding\:4{padding:var(--gap-4)}.md\:n-p\:5,.md\:n-padding\:5{padding:var(--gap-5)}.md\:n-p\:6,.md\:n-padding\:6{padding:var(--gap-6)}.md\:n-p\:7,.md\:n-padding\:7{padding:var(--gap-7)}.md\:n-p\:8,.md\:n-padding\:8{padding:var(--gap-8)}.md\:n-p\:9,.md\:n-padding\:9{padding:var(--gap-9)}.md\:n-p\:10,.md\:n-padding\:10{padding:var(--gap-10)}.md\:n-p\:10,.md\:n-padding\:ex{padding:var(--gap-ex)}}@media (min-width:992px){.lg\:n-p\:0,.lg\:n-padding\:0{padding:var(--gap-0)}.lg\:n-p\:1,.lg\:n-padding\:1{padding:var(--gap-1)}.lg\:n-p\:2,.lg\:n-padding\:2{padding:var(--gap-2)}.lg\:n-p\:3,.lg\:n-padding\:3{padding:var(--gap-3)}.lg\:n-p\:4,.lg\:n-padding\:4{padding:var(--gap-4)}.lg\:n-p\:5,.lg\:n-padding\:5{padding:var(--gap-5)}.lg\:n-p\:6,.lg\:n-padding\:6{padding:var(--gap-6)}.lg\:n-p\:7,.lg\:n-padding\:7{padding:var(--gap-7)}.lg\:n-p\:8,.lg\:n-padding\:8{padding:var(--gap-8)}.lg\:n-p\:9,.lg\:n-padding\:9{padding:var(--gap-9)}.lg\:n-p\:10,.lg\:n-padding\:10{padding:var(--gap-10)}.lg\:n-p\:10,.lg\:n-padding\:ex{padding:var(--gap-ex)}}@media (min-width:1200px){.xl\:n-p\:0,.xl\:n-padding\:0{padding:var(--gap-0)}.xl\:n-p\:1,.xl\:n-padding\:1{padding:var(--gap-1)}.xl\:n-p\:2,.xl\:n-padding\:2{padding:var(--gap-2)}.xl\:n-p\:3,.xl\:n-padding\:3{padding:var(--gap-3)}.xl\:n-p\:4,.xl\:n-padding\:4{padding:var(--gap-4)}.xl\:n-p\:5,.xl\:n-padding\:5{padding:var(--gap-5)}.xl\:n-p\:6,.xl\:n-padding\:6{padding:var(--gap-6)}.xl\:n-p\:7,.xl\:n-padding\:7{padding:var(--gap-7)}.xl\:n-p\:8,.xl\:n-padding\:8{padding:var(--gap-8)}.xl\:n-p\:9,.xl\:n-padding\:9{padding:var(--gap-9)}.xl\:n-p\:10,.xl\:n-padding\:10{padding:var(--gap-10)}.xl\:n-p\:10,.xl\:n-padding\:ex{padding:var(--gap-ex)}}
|
|
6
|
+
label:has(.n-row-expander):before{content:"\e5c5"}>tbody>tr:nth-child(odd):has(.n-row-expander:checked)+tr{display:table-row;>td{line-height:normal;overflow:hidden;padding:10px;text-align:start}}}.n-list{--gap:var(--space-2);--sp-color:var(--color-base-5);--sp-bg-image:none;--sp-dot-bg-size:3px 4px;--sp-dot-width:3px;--icon-color-active:var(--color-main-2);--icon-color-hover:var(--color-base-3);--bar-color-active:var(--color-main-2);--bar-color-hover:var(--color-base-3);--bg-color-hover:rgba(var(--rgb-base-2),0.3);--text-color-active:inherit}@media (prefers-color-scheme:dark){.n-list{--sp-color:var(--color-base-7,#333a44);--icon-color-active:var(--color-main-2);--icon-color-hover:var(--color-base-3);--bar-color-active:var(--color-main-2);--bar-color-hover:var(--color-base-3);--bg-color-hover:rgba(var(--rgb-base-8),0.3);--text-color-active:inherit}}.n-list{align-items:center;display:flex;flex-direction:row;text-overflow:ellipsis;&>*{align-items:center;box-sizing:border-box;display:flex;justify-content:center;padding:var(--space-2) var(--space-4);position:relative}&.hover>:hover{background-color:var(--bg-color-hover)}&.list-sep,&.list-sep\:dashed,&.list-sep\:dot,&.list-sep\:dotted,&.list-sep\:solid,&.list-seperator,&.list-seperator\:dashed,&.list-seperator\:dot,&.list-seperator\:dotted,&.list-seperator\:solid{gap:var(--gap)}&.list-sep>*+:before,&.list-sep\:dashed>*+:before,&.list-sep\:dot>*+:before,&.list-sep\:dotted>*+:before,&.list-sep\:solid>*+:before,&.list-seperator>*+:before,&.list-seperator\:dashed>*+:before,&.list-seperator\:dot>*+:before,&.list-seperator\:dotted>*+:before,&.list-seperator\:solid>*+:before{background-image:var(--sp-bg-image);background-repeat:repeat-y;background-size:1px 4px;bottom:25%;content:"";left:calc(var(--gap)*-.7);pointer-events:none;position:absolute;top:25%;width:1px}&.list-sep\:none,&.list-seperator\:none{&>*+:before{display:none}}&.list-sep\:solid,&.list-seperator\:solid{&>*+:before{--sp-bg-image:linear-gradient(to bottom,var(--sp-color) 100%,transparent 100%)}}&.list-sep\:dotted,&.list-seperator\:dotted{&>*+:before{--sp-bg-image:linear-gradient(to bottom,var(--sp-color) 50%,transparent 50%)}}&.list-sep\:dot,&.list-seperator\:dot{&>*+:before{--sp-bg-image:radial-gradient(circle,var(--sp-color) 1.5px,transparent 1.6px);background-image:linear-gradient(to bottom,var(--sp-color) 50%,transparent 50%);background-repeat:no-repeat;background-size:var(--sp-dot-bg-size);bottom:45%;top:45%;width:var(--sp-dot-width)}}&.list-sep\:dashed,&.list-seperator\:dashed{&>*+:before{background-image:linear-gradient(to bottom,var(--sp-color) 50%,transparent 50%)}}&.list-fit\:fill>*{flex:1 0 auto}&.list-fit\:shrink>*{flex:0 1 auto;min-width:0}&.list-fit\:noshrink{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}&.list-fit\:content>*,&.list-fit\:noshrink>*{flex:0 0 auto}&.list-fit\:wrap>*{flex-wrap:wrap}&.list-fit\:nowrap>*{flex-wrap:nowrap}&.list-vertical-align\:left{justify-content:flex-start}&.list-vertical-align\:center{justify-content:center}&.list-vertical-align\:right{justify-content:flex-end}&.active,&.active\:bar,&.active\:color{&>*{cursor:pointer;transition:background-color .3s ease,color .3s ease,opacity .3s ease;& label,input{cursor:pointer}&.active,&:has(input:checked){background-color:var(--color-background-onactive);color:var(--text-color-active)}}}&.active\:bar{&>*{&.active{background-color:transparent;color:var(--text-color-active);& .n-icon{color:var(--icon-color-active)}}&:hover{background-color:transparent;& .n-icon{color:var(--icon-color-hover)}}&:hover:after{background-color:var(--bar-color-hover)}&.active:after,&:hover:after{bottom:0;content:"";height:3px;left:0;opacity:1;position:absolute;right:0}&.active:after{background-color:var(--bar-color-active)}&:not(.active):not(:hover):after{opacity:0}}}&.list-dir\:column,&.list-direction\:column{--gap:0;align-items:flex-start;flex-direction:column;&>*{display:flex;justify-content:flex-start;width:100%}&>*+:before{display:none}&.list-sep,&.list-sep\:dashed,&.list-sep\:dot,&.list-sep\:dotted,&.list-sep\:solid,&.list-seperator,&.list-seperator\:dashed,&.list-seperator\:dot,&.list-seperator\:dotted,&.list-seperator\:solid{&>*+:before{background-image:linear-gradient(to right,var(--sp-color) 50%,transparent 50%);background-repeat:repeat-x;background-size:4px 1px;content:"";display:block;height:1px;left:0;pointer-events:none;position:absolute;right:0;top:0;width:auto}}&.list-sep\:none,&.list-seperator\:none{&>*+:before{display:none}}&.list-sep\:solid,&.list-seperator\:solid{&>*+:before{background-image:linear-gradient(to right,var(--sp-color) 100%,transparent 100%);background-size:100% 1px}}&.list-sep\:dotted,&.list-seperator\:dotted{&>*+:before{background-image:linear-gradient(to right,var(--sp-color) 50%,transparent 50%);background-size:4px 1px}}&.list-sep\:dashed,&.list-seperator\:dashed{&>*+:before{background-image:linear-gradient(to right,var(--sp-color) 50%,transparent 50%);background-size:8px 1px}}&.list-align\:left>*{justify-content:flex-start}&.list-align\:center>*{justify-content:center}&.list-align\:right>*{justify-content:flex-end}&.list-valign\:top>*,&.list-vertical-align\:top>*{align-items:flex-start}&.list-valign\:center>*,&.list-vertical-align\:center>*{align-items:center}&.list-valign\:bottom>*,&.list-vertical-align\:bottom>*{align-items:flex-end}}& .w\:grow{flex-grow:1}&.list\:aside-menu{flex-direction:column;overflow:hidden;width:100%;&>*{align-items:center;border:none;display:flex;flex-shrink:0;justify-content:flex-start;overflow:hidden;padding:10px;width:100%}}}.n-list\:wrap{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.n-list\:dl{display:flex;flex-direction:column;>div{display:flex;flex-direction:row;padding:var(--space-2) 0;>dt{font-weight:700;&:after{content:":"}}>dd{flex-grow:1;margin-left:var(--space-2)}}>div:last-child{border-bottom:none}}.n-list\:dl.dl-sperator\:solid{>div{border-bottom:1px solid var(--color-base-5)}}.n-list\:dl.dl-sperator\:ruled{>div{border-bottom:1px dashed var(--color-base-5)}}@media (hover:hover) and (pointer:fine){.n-list{&.list\:aside-menu{&>li:hover{background-color:var(--color-hover-bg);color:var(--color-hover-text)}}}}.list\:cols{--column-width:300px;display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(var(--column-width),1fr));&.column-width\:1{--column-width:250px}&.column-width\:2{--column-width:300px}&.column-width\:3{--column-width:350px}&.column-width\:4{--column-width:400px}&.column-width\:5{--column-width:450px}&.column-width\:6{--column-width:500px}&.column-width\:auto{--column-width:auto}&.column-width\:100p{--column-width:100%}&.column-width\:50p{--column-width:50%}&.column-width\:33p{--column-width:33.33%}&.column-width\:25p{--column-width:25%}}:root{--icon-size:24px;--icon-family:"Material Symbols Outlined";--icon-color:var(--color-base-9);--icon-variation-settings:"FILL" 0}@media (prefers-color-scheme:dark){:root{--icon-color:var(--color-base-2)}}.n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;transition:all .2s ease-in-out;visibility:visible;width:var(--icon-size);&:before{align-items:center;color:inherit;content:"";display:inline-flex;flex-shrink:0;font-family:var(--icon-family);font-size:var(--icon-size);font-variation-settings:var(--icon-variation-settings);height:var(--icon-size);overflow:hidden;vertical-align:top;width:var(--icon-size)}&.hover:not(.n-deco):hover{background-color:var(--color-base-3);border-radius:50%;transform:scale(1.4);&:before{transform:scale(.72)}}.icon-style\:outlined:before{--icon-family:"Material Symbols Outlined"}.icon-style\:filled:before{--icon-variation-settings:"FILL" 1}.icon-style\:rounded:before{--icon-family:"Material Symbols Rounded"}.icon-style\:sharp:before{--icon-family:"Material Symbols Sharp"}.icon-color\:main-1:before{--icon-color:var(--color-main-1)}.icon-color\:main-2:before{--icon-color:var(--color-main-2)}.icon-color\:main-3:before{--icon-color:var(--color-main-3)}.icon-color\:sub-1:before{--icon-color:var(--color-sub-1)}.icon-color\:sub-2:before{--icon-color:var(--color-sub-2)}.icon-color\:sub-3:before{--icon-color:var(--color-sub-3)}.icon-color\:accent-1:before{--icon-color:var(--color-accent-1)}.icon-color\:accent-2:before{--icon-color:var(--color-accent-2)}.icon-color\:accent-3:before{--icon-color:var(--color-accent-3)}.icon-color\:base-1:before{--icon-color:var(--color-base-1)}.icon-color\:base-2:before{--icon-color:var(--color-base-2)}.icon-color\:base-3:before{--icon-color:var(--color-base-3)}.icon-color\:base-4:before{--icon-color:var(--color-base-4)}.icon-color\:base-5:before{--icon-color:var(--color-base-5)}.icon-color\:base-6:before{--icon-color:var(--color-base-6)}.icon-color\:base-7:before{--icon-color:var(--color-base-7)}.icon-color\:base-8:before{--icon-color:var(--color-base-8)}.icon-color\:base-9:before{--icon-color:var(--color-base-9)}.icon-color\:base-10:before{--icon-color:var(--color-base-10)}.icon-size\:1{--icon-size:var(--size-1)}.icon-size\:2{--icon-size:var(--size-2)}.icon-size\:3{--icon-size:var(--size-3)}.icon-size\:4{--icon-size:var(--size-4)}.icon-size\:5{--icon-size:var(--size-5)}.icon-size\:6{--icon-size:var(--size-6)}.icon-size\:7{--icon-size:var(--size-7)}.icon-size\:8{--icon-size:var(--size-8)}.icon-size\:9{--icon-size:var(--size-9)}.icon-size\:10{--icon-size:var(--size-10)}.icon-size\:11{--icon-size:var(--size-11)}.icon-size\:12{--icon-size:var(--size-12)}.icon-size\:13{--icon-size:var(--size-13)}}@media (min-width:640px){.sm\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size);&:before{content:"\e87d";font-family:Material Symbols Outlined;font-size:var(--icon-size)}&.icon-color\:main-1:before{color:var(--color-main-1)}&.icon-color\:main-2:before{color:var(--color-main-2)}&.icon-color\:main-3:before{color:var(--color-main-3)}&.icon-color\:sub-1:before{color:var(--color-sub-1)}&.icon-color\:sub-2:before{color:var(--color-sub-2)}&.icon-color\:sub-3:before{color:var(--color-sub-3)}&.icon-color\:accent-1:before{color:var(--color-accent-1)}&.icon-color\:accent-2:before{color:var(--color-accent-2)}&.icon-color\:accent-3:before{color:var(--color-accent-3)}&.icon-color\:base-1:before{color:var(--color-base-1)}&.icon-color\:base-2:before{color:var(--color-base-2)}&.icon-color\:base-3:before{color:var(--color-base-3)}&.icon-color\:base-4:before{color:var(--color-base-4)}&.icon-color\:base-5:before{color:var(--color-base-5)}&.icon-color\:base-6:before{color:var(--color-base-6)}&.icon-color\:base-7:before{color:var(--color-base-7)}&.icon-color\:base-8:before{color:var(--color-base-8)}&.icon-color\:base-9:before{color:var(--color-base-9)}&.icon-color\:base-10:before{color:var(--color-base-10)}&.icon-size\:1{--icon-size:var(--size-1)}&.icon-size\:2{--icon-size:var(--size-2)}&.icon-size\:3{--icon-size:var(--size-3)}&.icon-size\:4{--icon-size:var(--size-4)}&.icon-size\:5{--icon-size:var(--size-5)}&.icon-size\:6{--icon-size:var(--size-6)}&.icon-size\:7{--icon-size:var(--size-7)}&.icon-size\:8{--icon-size:var(--size-8)}&.icon-size\:9{--icon-size:var(--size-9)}&.icon-size\:10{--icon-size:var(--size-10)}&.icon-size\:11{--icon-size:var(--size-11)}&.icon-size\:12{--icon-size:var(--size-12)}&.icon-size\:13{--icon-size:var(--size-13)}&.icon-size\:xs:before{font-size:var(--font-size-xs)}&.icon-size\:sm:before{font-size:var(--font-size-sm)}&.icon-size\:base:before{font-size:var(--font-size-base)}&.icon-size\:lg:before{font-size:var(--font-size-lg)}&.icon-size\:xl:before{font-size:var(--font-size-xl)}&.icon-size\:2xl:before{font-size:var(--font-size-2xl)}&.icon-size\:3xl:before{font-size:var(--font-size-3xl)}&.icon-size\:4xl:before{font-size:var(--font-size-4xl)}}}@media (min-width:768px){.md\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size);&.icon-size\:1{--icon-size:var(--size-1)}&.icon-size\:2{--icon-size:var(--size-2)}&.icon-size\:3{--icon-size:var(--size-3)}&.icon-size\:4{--icon-size:var(--size-4)}&.icon-size\:5{--icon-size:var(--size-5)}&.icon-size\:6{--icon-size:var(--size-6)}&.icon-size\:7{--icon-size:var(--size-7)}&.icon-size\:8{--icon-size:var(--size-8)}&.icon-size\:9{--icon-size:var(--size-9)}&.icon-size\:10{--icon-size:var(--size-10)}&.icon-size\:11{--icon-size:var(--size-11)}&.icon-size\:12{--icon-size:var(--size-12)}&.icon-size\:13{--icon-size:var(--size-13)}&:before{font-family:Material Symbols Outlined;font-size:var(--icon-size)}}}@media (min-width:1024px){.lg\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size);&.icon-size\:1{--icon-size:var(--size-1)}&.icon-size\:2{--icon-size:var(--size-2)}&.icon-size\:3{--icon-size:var(--size-3)}&.icon-size\:4{--icon-size:var(--size-4)}&.icon-size\:5{--icon-size:var(--size-5)}&.icon-size\:6{--icon-size:var(--size-6)}&.icon-size\:7{--icon-size:var(--size-7)}&.icon-size\:8{--icon-size:var(--size-8)}&.icon-size\:9{--icon-size:var(--size-9)}&.icon-size\:10{--icon-size:var(--size-10)}&.icon-size\:11{--icon-size:var(--size-11)}&.icon-size\:12{--icon-size:var(--size-12)}&.icon-size\:13{--icon-size:var(--size-13)}&:before{font-family:Material Symbols Outlined;font-size:var(--icon-size)}&.icon-color\:main-1:before{color:var(--color-main-1)}&.icon-color\:main-2:before{color:var(--color-main-2)}&.icon-color\:main-3:before{color:var(--color-main-3)}&.icon-color\:sub-1:before{color:var(--color-sub-1)}&.icon-color\:sub-2:before{color:var(--color-sub-2)}&.icon-color\:sub-3:before{color:var(--color-sub-3)}&.icon-color\:accent-1:before{color:var(--color-accent-1)}&.icon-color\:accent-2:before{color:var(--color-accent-2)}&.icon-color\:accent-3:before{color:var(--color-accent-3)}&.icon-color\:base-1:before{color:var(--color-base-1)}&.icon-color\:base-2:before{color:var(--color-base-2)}&.icon-color\:base-3:before{color:var(--color-base-3)}&.icon-color\:base-4:before{color:var(--color-base-4)}&.icon-color\:base-5:before{color:var(--color-base-5)}&.icon-color\:base-6:before{color:var(--color-base-6)}&.icon-color\:base-7:before{color:var(--color-base-7)}&.icon-color\:base-8:before{color:var(--color-base-8)}&.icon-color\:base-9:before{color:var(--color-base-9)}&.icon-color\:base-10:before{color:var(--color-base-10)}&.icon-size\:xs:before{font-size:var(--font-size-xs)}&.icon-size\:sm:before{font-size:var(--font-size-sm)}&.icon-size\:base:before{font-size:var(--font-size-base)}&.icon-size\:lg:before{font-size:var(--font-size-lg)}&.icon-size\:xl:before{font-size:var(--font-size-xl)}&.icon-size\:2xl:before{font-size:var(--font-size-2xl)}&.icon-size\:3xl:before{font-size:var(--font-size-3xl)}&.icon-size\:4xl:before{font-size:var(--font-size-4xl)}}}@media (min-width:1280px){.xl\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size)}.xl\:icon-size\:1{--icon-size:var(--size-1)}.xl\:icon-size\:2{--icon-size:var(--size-2)}.xl\:icon-size\:3{--icon-size:var(--size-3)}.xl\:icon-size\:4{--icon-size:var(--size-4)}.xl\:icon-size\:5{--icon-size:var(--size-5)}.xl\:icon-size\:6{--icon-size:var(--size-6)}.xl\:icon-size\:7{--icon-size:var(--size-7)}.xl\:icon-size\:8{--icon-size:var(--size-8)}.xl\:icon-size\:9{--icon-size:var(--size-9)}.xl\:icon-size\:10{--icon-size:var(--size-10)}.xl\:icon-size\:11{--icon-size:var(--size-11)}.xl\:icon-size\:12{--icon-size:var(--size-12)}.xl\:icon-size\:13{--icon-size:var(--size-13)}.xl\:n-icon:before{font-family:Material Symbols Outlined;font-size:var(--icon-size)}.xl\:icon-color\:main-1:before{color:var(--color-main-1)}.xl\:icon-color\:main-2:before{color:var(--color-main-2)}.xl\:icon-color\:main-3:before{color:var(--color-main-3)}.xl\:icon-color\:sub-1:before{color:var(--color-sub-1)}.xl\:icon-color\:sub-2:before{color:var(--color-sub-2)}.xl\:icon-color\:sub-3:before{color:var(--color-sub-3)}.xl\:icon-color\:accent-1:before{color:var(--color-accent-1)}.xl\:icon-color\:accent-2:before{color:var(--color-accent-2)}.xl\:icon-color\:accent-3:before{color:var(--color-accent-3)}.xl\:icon-color\:base-1:before{color:var(--color-base-1)}.xl\:icon-color\:base-2:before{color:var(--color-base-2)}.xl\:icon-color\:base-3:before{color:var(--color-base-3)}.xl\:icon-color\:base-4:before{color:var(--color-base-4)}.xl\:icon-color\:base-5:before{color:var(--color-base-5)}.xl\:icon-color\:base-6:before{color:var(--color-base-6)}.xl\:icon-color\:base-7:before{color:var(--color-base-7)}.xl\:icon-color\:base-8:before{color:var(--color-base-8)}.xl\:icon-color\:base-9:before{color:var(--color-base-9)}.xl\:icon-color\:base-10:before{color:var(--color-base-10)}.xl\:icon-size\:xs:before{font-size:var(--font-size-xs)}.xl\:icon-size\:sm:before{font-size:var(--font-size-sm)}.xl\:icon-size\:base:before{font-size:var(--font-size-base)}.xl\:icon-size\:lg:before{font-size:var(--font-size-lg)}.xl\:icon-size\:xl:before{font-size:var(--font-size-xl)}.xl\:icon-size\:2xl:before{font-size:var(--font-size-2xl)}.xl\:icon-size\:3xl:before{font-size:var(--font-size-3xl)}.xl\:icon-size\:4xl:before{font-size:var(--font-size-4xl)}}.icon\:home:before{content:"\e88a"}.icon\:menu:before{content:"\e5d2"}.icon\:close:before{content:"\e5cd"}.icon\:arrow_back:before{content:"\e5c4"}.icon\:arrow_forward:before{content:"\e5c8"}.icon\:expand_more:before{content:"\e5cf"}.icon\:expand_less:before{content:"\e5ce"}.icon\:chevron_left:before{content:"\e5cb"}.icon\:chevron_right:before{content:"\e5cc"}.icon\:more_vert:before{content:"\e5d4"}.icon\:more_horiz:before{content:"\e5d3"}.icon\:refresh:before{content:"\e5d5"}.icon\:settings:before{content:"\e8b8"}.icon\:apps:before{content:"\e5c3"}.icon\:launch:before{content:"\e895"}.icon\:add:before{content:"\e145"}.icon\:remove:before{content:"\e15b"}.icon\:edit:before{content:"\e3c9"}.icon\:delete:before{content:"\e872"}.icon\:save:before{content:"\e161"}.icon\:check:before{content:"\e5ca"}.icon\:clear:before{content:"\e14c"}.icon\:cancel:before{content:"\e5c9"}.icon\:done:before{content:"\e876"}.icon\:search:before{content:"\e8b6"}.icon\:share:before{content:"\e80d"}.icon\:download:before{content:"\e2c4"}.icon\:upload:before{content:"\e2c6"}.icon\:copy:before{content:"\e14d"}.icon\:visibility:before{content:"\e8f4"}.icon\:visibility_off:before{content:"\e8f5"}.icon\:lock:before{content:"\e897"}.icon\:lock_open:before{content:"\e898"}.icon\:sync:before{content:"\e627"}.icon\:info:before{content:"\e88e"}.icon\:email:before{content:"\e0be"}.icon\:phone:before{content:"\e0cd"}.icon\:chat:before{content:"\e0b7"}.icon\:notifications:before{content:"\e7f4"}.icon\:send:before{content:"\e163"}.icon\:reply:before{content:"\e15e"}.icon\:help:before{content:"\e887"}.icon\:feedback:before{content:"\e87f"}.icon\:play_arrow:before{content:"\e037"}.icon\:pause:before{content:"\e034"}.icon\:stop:before{content:"\e047"}.icon\:volume_up:before{content:"\e050"}.icon\:volume_off:before{content:"\e04f"}.icon\:mic:before{content:"\e029"}.icon\:mic_off:before{content:"\e02b"}.icon\:folder:before{content:"\e2c7"}.icon\:folder_open:before{content:"\e2c8"}.icon\:attach_file:before{content:"\e226"}.icon\:cloud:before{content:"\e2bd"}.icon\:description:before{content:"\e873"}.icon\:person:before{content:"\e7fd"}.icon\:people:before{content:"\e7fb"}.icon\:favorite:before{content:"\e87d"}.icon\:star:before{content:"\e838"}.icon\:thumb_up:before{content:"\e8dc"}.n-btn{--line-height:1.4em;--font-size:14px;--padding:0.3em 0.7em;--bd-radius:6px;--bd-color:var(--color-base-4);--bd-color-hover:var(--color-base-8);--bd-color-active:var(--color-main-2);--bg-color:var(--color-base-3);--bg-color-hover:transparent;--bg-color-active:rgba(var(--rgb-main-2),0.7);--text-color:var(--color-base-8);--text-color-hover:var(--color-base-7);--text-color-active:var(--color-accent-2);--text-indent:-999px}@media (prefers-color-scheme:dark){.n-btn{--bd-color:var(--color-base-3);--bd-color-hover:var(--color-base-7);--bd-color-active:var(--color-base-9);--bg-color:var(--color-base-7);--bg-color-hover:transparent;--bg-color-active:rgba(var(--rgb-main-1),0.7);--text-color:var(--color-base-2);--text-color-hover:var(--color-base-2);--text-color-active:var(--color-accent-1)}}.n-btn{align-items:center;background-color:var(--bg-color);border:1px solid var(--bd-color);border-radius:var(--bd-radius);box-sizing:border-box;color:var(--text-color);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-size,14px);font-weight:400;height:auto;justify-content:center;line-height:var(--line-height);padding:var(--padding);position:relative;transition:background-color .15s ease,border-color .15s ease,color .15s ease;user-select:none;white-space:nowrap;width:auto;&:before{align-items:center;display:inline-flex;font-family:Material Symbols Outlined;font-size:var(--icon-size);height:var(--icon-size);justify-content:center;overflow:hidden;width:var(--icon-size)}&:hover{background-color:var(--bg-color-hover);border-color:var(--bd-color-hover);color:var(--text-color-hover);text-decoration:none;transition:background-color .4s ease,border-color .4s ease,color .4s ease}&:active{color:var(--text-color-active)}&:focus-visible{outline:2px solid var(--bd-color-active);outline-offset:1px}&.n-icon:not(.n-deco){--padding:4px;text-indent:-999px;&:before{text-indent:0}}&.n-icon.n-deco{text-indent:0}&.btn\:rounded{--bd-radius:8px}&.btn\:circle{--bd-radius:50%}&.btn\:badge{--font-size:var(--size-5);--bd-radius:0.6em;--padding:0.2em 0.4em}&.disabled{--text-color:var(--color-base-1);--text-color-hover:var(--color-base-5);--text-color-active:var(--color-base-5);--bd-color:var(--color-base-5);--bd-color-hover:var(--color-base-5);--bd-color-active:var(--color-base-5);--bg-color:var(--color-base-4);--bg-color-hover:var(--color-base-3);--bg-color-active:var(--color-base-3)}&.btn-size\:1{--font-size:var(--size-6)}&.btn-size\:2{--font-size:var(--size-7)}&.btn-size\:3{--font-size:var(--size-8)}&.btn-size\:4{--font-size:var(--size-9)}&.btn-size\:5{--font-size:var(--size-10)}&.btn-size\:6{--font-size:var(--size-11)}&.btn-size\:7{--font-size:var(--size-12)}&.btn-size\:8{--font-size:var(--size-13)}&.btn-size\:9{--font-size:var(--size-14)}&.btn-size\:ex{--font-size:var(--size-15)}&.btn-size\:inline{--padding:0;--line-height:1em}&.btn-size\:small{--font-size:var(--size-1);--padding:0.1em 0.2em;--line-height:1em}&.btn-color\:main-1{--bg-color:var(--color-main-1);--bd-color:var(--color-main-1);--text-color:var(--color-base-1);&:hover{--bg-color-hover:var(--color-main-2);--bd-color-hover:var(--color-main-2);--text-color:var(--color-base-1)}&:active{--bg-color:var(--color-main-3);--bd-color:var(--color-main-3);--text-color:var(--color-main-3)}}&.btn-color\:sub-1{--bg-color:var(--color-sub-1);--bd-color:var(--color-sub-1);--text-color:var(--color-base-1);&:hover{--bd-color-hover:var(--color-sub-2);--text-color:var(--color-base-1)}&:active{--bd-color:var(--color-sub-3);--text-color:var(--color-sub-3)}}&.btn-color\:accent-1{--bg-color:var(--color-accent-1);--bd-color:var(--color-accent-1);--text-color:var(--color-base-1);&:hover{--bd-color-hover:var(--color-accent-2);--text-color:var(--color-base-1)}&:active{--bg-color:var(--color-accent-3);--bd-color:var(--color-accent-3);--text-color:var(--color-accent-3)}}}.n-deco{--deco-gap:4px;align-items:center;display:inline-flex;gap:var(--deco-gap);justify-content:center;text-align:center;text-indent:0;width:auto;&:before{align-items:center;display:inline-flex;flex-shrink:0;font-family:Material Symbols Outlined;font-size:var(--icon-size);height:var(--icon-size);justify-content:center;overflow:hidden;width:var(--icon-size)}}.deco-pos\:bottom,.deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.deco-pos\:left:before,.deco-pos\:top:before{order:unset}.deco-pos\:bottom:before,.deco-pos\:right:before{order:1}.deco-pos\:bottom,.deco-pos\:top{width:auto}:not(.n-deco).deco-pos\:bottom,:not(.n-deco).deco-pos\:left,:not(.n-deco).deco-pos\:right,:not(.n-deco).deco-pos\:top{align-items:center;display:flex;flex-direction:row;justify-content:center;overflow:visible;position:relative}:not(.n-deco).deco-pos\:bottom:before,:not(.n-deco).deco-pos\:left:before,:not(.n-deco).deco-pos\:right:before,:not(.n-deco).deco-pos\:top:before{border:1px solid red;color:red;content:"Error: n-deco is missing.";display:flex;font-family:Arial,Helvetica,sans-serif;font-size:12px;height:100%;left:0;position:absolute;top:0;width:150px}.deco-gap\:0{--deco-gap:0px}.deco-gap\:1{--deco-gap:5px}.deco-gap\:2{--deco-gap:10px}@media screen and (min-width:576px){.sm\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var(--deco-gap);text-align:center;text-indent:0;width:auto}.sm\:deco-pos\:bottom,.sm\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.sm\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.sm\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.sm\:deco-pos\:left,.sm\:deco-pos\:top{&:before{order:unset}}.sm\:deco-pos\:bottom:before,.sm\:deco-pos\:right:before{order:1}.sm\:deco-pos\:left,.sm\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.sm\:deco-gap\:0{--deco-gap:0px}.sm\:deco-gap\:1{--deco-gap:5px}.sm\:deco-gap\:2{--deco-gap:10px}}@media screen and (min-width:768px){.md\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var(--deco-gap);text-align:center;text-indent:0;width:auto}.md\:deco-pos\:bottom,.md\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.md\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.md\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.md\:deco-pos\:left,.md\:deco-pos\:top{&:before{order:unset}}.md\:deco-pos\:bottom:before,.md\:deco-pos\:right:before{order:1}.md\:deco-pos\:left,.md\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.md\:deco-gap\:0{--deco-gap:0px}.md\:deco-gap\:1{--deco-gap:5px}.md\:deco-gap\:2{--deco-gap:10px}}@media screen and (min-width:992px){.lg\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var(--deco-gap);text-align:center;text-indent:0;width:auto}.lg\:deco-pos\:bottom,.lg\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.lg\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.lg\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.lg\:deco-pos\:left,.lg\:deco-pos\:top{&:before{order:unset}}.lg\:deco-pos\:bottom:before,.lg\:deco-pos\:right:before{order:1}.lg\:deco-pos\:left,.lg\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.lg\:deco-gap\:0{--deco-gap:0px}.lg\:deco-gap\:1{--deco-gap:5px}.lg\:deco-gap\:2{--deco-gap:10px}}@media screen and (min-width:1200px){.xl\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var (--deco-gap);text-align:center;text-indent:0;width:auto}.xl\:deco-pos\:bottom,.xl\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.xl\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.xl\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.xl\:deco-pos\:left,.xl\:deco-pos\:top{&:before{order:unset}}.xl\:deco-pos\:bottom:before,.xl\:deco-pos\:right:before{order:1}.xl\:deco-pos\:left,.xl\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.xl\:deco-gap\:0{--deco-gap:0px}.xl\:deco-gap\:1{--deco-gap:5px}.xl\:deco-gap\:2{--deco-gap:10px}}
|
package/dist/js/n-layout.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
class t{constructor(){this.isResizing=!1,this.startX=0,this.startWidth=0,this.currentAside=null,this.minWidth=200,this.maxWidth=600,this.init()}init(){"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>this.bindEvents())):this.bindEvents()}bindEvents(){document.addEventListener("mousedown",this.handleMouseDown.bind(this)),document.addEventListener("mousemove",this.handleMouseMove.bind(this)),document.addEventListener("mouseup",this.handleMouseUp.bind(this)),document.addEventListener("touchstart",this.handleTouchStart.bind(this)),document.addEventListener("touchmove",this.handleTouchMove.bind(this)),document.addEventListener("touchend",this.handleTouchEnd.bind(this)),document.addEventListener("keydown",this.handleKeyDown.bind(this))}handleMouseDown(t){const
|
|
1
|
+
class t{constructor(){this.isResizing=!1,this.startX=0,this.startWidth=0,this.currentAside=null,this.minWidth=200,this.maxWidth=600,this.init()}init(){"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>this.bindEvents())):this.bindEvents()}bindEvents(){document.addEventListener("mousedown",this.handleMouseDown.bind(this)),document.addEventListener("mousemove",this.handleMouseMove.bind(this)),document.addEventListener("mouseup",this.handleMouseUp.bind(this)),document.addEventListener("touchstart",this.handleTouchStart.bind(this)),document.addEventListener("touchmove",this.handleTouchMove.bind(this)),document.addEventListener("touchend",this.handleTouchEnd.bind(this)),document.addEventListener("keydown",this.handleKeyDown.bind(this)),document.addEventListener("mousemove",this.handleHover.bind(this))}handleMouseDown(t){const e=this.findResizableAside(t.target);e&&this.isInResizeArea(t,e)&&this.startResize(t.clientX,e)}handleMouseMove(t){this.isResizing&&this.updateResize(t.clientX)}handleHover(t){if(this.isResizing)return;const e=this.findResizableAside(t.target);e&&this.isInResizeArea(t,e)?document.body.style.cursor="ew-resize":"ew-resize"===document.body.style.cursor&&(document.body.style.cursor="")}handleMouseUp(){this.stopResize()}handleTouchStart(t){const e=this.findResizableAside(t.target);e&&this.isInResizeArea(t.touches[0],e)&&(t.preventDefault(),this.startResize(t.touches[0].clientX,e))}handleTouchMove(t){this.isResizing&&(t.preventDefault(),this.updateResize(t.touches[0].clientX))}handleTouchEnd(){this.stopResize()}handleKeyDown(t){"Escape"===t.key&&this.isResizing&&this.stopResize()}findResizableAside(t){const e=t.closest("aside, .n-aside");if(!e)return null;const s=e.closest(".n-layout");return s&&s.classList.contains("layout-aside-width:resizable")?(s.classList.contains("layout-aside-width:responsive")&&s.classList.remove("layout-aside-width:responsive"),e):null}isInResizeArea(t,e){const s=e.getBoundingClientRect(),i=e.closest(".n-layout");if(i&&i.classList.contains("layout-aside-pos:right")){return t.clientX-s.left<=8}return s.right-t.clientX<=8}startResize(t,e){this.isResizing=!0,this.currentAside=e,this.startX=t,this.startWidth=e.offsetWidth,e.classList.add("resizing"),document.body.style.cursor="ew-resize",document.body.style.userSelect="none"}updateResize(t){if(!this.isResizing||!this.currentAside)return;const e=t-this.startX;let s=this.startWidth+e;const i=this.currentAside.closest(".n-layout");i&&i.classList.contains("layout-aside-pos:right")&&(s=this.startWidth-e),s=Math.max(this.minWidth,Math.min(this.maxWidth,s)),this.currentAside.style.width=`${s}px`,i&&i.style.setProperty("--aside-width",`${s}px`),this.preventHorizontalScroll()}preventHorizontalScroll(){const t=this.currentAside?.closest(".n-layout");if(t){const e=window.innerWidth;if(t.scrollWidth>e){const t=e-100;this.currentAside.offsetWidth>t&&(this.currentAside.style.width=`${t}px`)}}}stopResize(){this.isResizing&&(this.currentAside&&this.currentAside.classList.remove("resizing"),this.isResizing=!1,this.currentAside=null,this.startX=0,this.startWidth=0,document.body.style.cursor="",document.body.style.userSelect="")}}new t,window.NLayoutResizer=t;
|