@open330/kiwimu 0.3.3 → 0.4.0

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.
@@ -2,18 +2,22 @@
2
2
 
3
3
  :root {
4
4
  --bg: #ffffff;
5
- --bg-alt: #f8f9fa;
6
- --bg-hover: #e9ecef;
7
- --text: #212529;
8
- --text-muted: #6c757d;
9
- --link: #0275d8;
10
- --link-hover: #014c8c;
11
- --border: #dee2e6;
12
- --accent: #4caf50;
13
- --accent-light: #e8f5e9;
14
- --sidebar-width: 260px;
15
- --topbar-height: 48px;
16
- --radius: 6px;
5
+ --bg-alt: #f6f6f6;
6
+ --bg-hover: #eaeaea;
7
+ --text: #1a1a1a;
8
+ --text-muted: #6b6b6b;
9
+ --link: #0067a3;
10
+ --link-hover: #004b7a;
11
+ --border: #dcdcdc;
12
+ --accent: #00a495;
13
+ --accent-dark: #008c7e;
14
+ --accent-light: #e0f5f3;
15
+ --namu-green: #00a495;
16
+ --namu-green-dark: #007a6e;
17
+ --namu-heading-bg: #00a495;
18
+ --sidebar-width: 250px;
19
+ --topbar-height: 44px;
20
+ --radius: 4px;
17
21
  }
18
22
 
19
23
  * {
@@ -23,7 +27,7 @@
23
27
  }
24
28
 
25
29
  body {
26
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
30
+ font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
27
31
  color: var(--text);
28
32
  background: var(--bg);
29
33
  line-height: 1.7;
@@ -40,26 +44,26 @@ a:hover {
40
44
  text-decoration: underline;
41
45
  }
42
46
 
43
- /* Topbar */
47
+ /* Topbar - namuwiki style */
44
48
  .topbar {
45
49
  position: fixed;
46
50
  top: 0;
47
51
  left: 0;
48
52
  right: 0;
49
53
  height: var(--topbar-height);
50
- background: var(--bg);
51
- border-bottom: 1px solid var(--border);
54
+ background: var(--namu-green);
52
55
  display: flex;
53
56
  align-items: center;
54
- padding: 0 20px;
57
+ padding: 0 16px;
55
58
  z-index: 100;
56
- gap: 16px;
59
+ gap: 12px;
60
+ box-shadow: 0 1px 3px rgba(0,0,0,0.15);
57
61
  }
58
62
 
59
63
  .topbar-brand {
60
64
  font-weight: 700;
61
- font-size: 17px;
62
- color: var(--text);
65
+ font-size: 16px;
66
+ color: #ffffff;
63
67
  white-space: nowrap;
64
68
  display: flex;
65
69
  align-items: center;
@@ -68,34 +72,36 @@ a:hover {
68
72
 
69
73
  .topbar-brand:hover {
70
74
  text-decoration: none;
71
- color: var(--accent);
75
+ color: #e0f5f3;
72
76
  }
73
77
 
74
78
  .topbar-logo {
75
- width: 28px;
76
- height: 28px;
79
+ width: 26px;
80
+ height: 26px;
77
81
  object-fit: contain;
82
+ filter: brightness(10);
78
83
  }
79
84
 
80
85
  .topbar-search {
81
86
  flex: 1;
82
- max-width: 400px;
87
+ max-width: 360px;
83
88
  position: relative;
84
89
  }
85
90
 
86
91
  .topbar-search input {
87
92
  width: 100%;
88
- padding: 6px 12px;
89
- border: 1px solid var(--border);
90
- border-radius: var(--radius);
93
+ padding: 5px 12px;
94
+ border: none;
95
+ border-radius: 3px;
91
96
  font-size: 14px;
92
97
  outline: none;
93
- transition: border-color 0.2s;
98
+ background: rgba(255,255,255,0.9);
99
+ transition: background 0.2s;
94
100
  }
95
101
 
96
102
  .topbar-search input:focus {
97
- border-color: var(--accent);
98
- box-shadow: 0 0 0 2px var(--accent-light);
103
+ background: #ffffff;
104
+ box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
99
105
  }
100
106
 
101
107
  .search-dropdown {
@@ -107,7 +113,7 @@ a:hover {
107
113
  background: var(--bg);
108
114
  border: 1px solid var(--border);
109
115
  border-radius: var(--radius);
110
- box-shadow: 0 4px 12px rgba(0,0,0,0.1);
116
+ box-shadow: 0 4px 12px rgba(0,0,0,0.12);
111
117
  max-height: 300px;
112
118
  overflow-y: auto;
113
119
  z-index: 200;
@@ -130,26 +136,30 @@ a:hover {
130
136
  }
131
137
 
132
138
  .search-dropdown .search-highlight {
133
- color: var(--accent);
139
+ color: var(--namu-green);
134
140
  font-weight: 600;
135
141
  }
136
142
 
137
143
  .topbar-links {
138
144
  margin-left: auto;
145
+ display: flex;
146
+ gap: 4px;
139
147
  }
140
148
 
141
149
  .btn-graph {
142
- padding: 4px 12px;
143
- border: 1px solid var(--border);
144
- border-radius: var(--radius);
150
+ padding: 4px 10px;
151
+ border: 1px solid rgba(255,255,255,0.3);
152
+ border-radius: 3px;
145
153
  font-size: 13px;
146
- color: var(--text);
154
+ color: #ffffff;
147
155
  white-space: nowrap;
156
+ transition: background 0.15s;
148
157
  }
149
158
 
150
159
  .btn-graph:hover {
151
- background: var(--bg-alt);
160
+ background: rgba(255,255,255,0.15);
152
161
  text-decoration: none;
162
+ color: #ffffff;
153
163
  }
154
164
 
155
165
  /* Layout */
@@ -159,12 +169,12 @@ a:hover {
159
169
  min-height: calc(100vh - var(--topbar-height));
160
170
  }
161
171
 
162
- /* Sidebar */
172
+ /* Sidebar - namuwiki style */
163
173
  .sidebar {
164
174
  width: var(--sidebar-width);
165
175
  background: var(--bg-alt);
166
176
  border-right: 1px solid var(--border);
167
- padding: 16px 0;
177
+ padding: 0;
168
178
  position: fixed;
169
179
  top: var(--topbar-height);
170
180
  bottom: 0;
@@ -173,13 +183,13 @@ a:hover {
173
183
 
174
184
  .sidebar-header {
175
185
  font-weight: 700;
176
- font-size: 13px;
186
+ font-size: 12px;
177
187
  text-transform: uppercase;
178
188
  letter-spacing: 0.05em;
179
189
  color: var(--text-muted);
180
- padding: 0 16px 8px;
190
+ padding: 0 14px 8px;
181
191
  border-bottom: 1px solid var(--border);
182
- margin-bottom: 8px;
192
+ margin-bottom: 0;
183
193
  }
184
194
 
185
195
  .page-list {
@@ -188,12 +198,13 @@ a:hover {
188
198
 
189
199
  .page-list li a {
190
200
  display: block;
191
- padding: 4px 16px;
201
+ padding: 5px 14px;
192
202
  color: var(--text);
193
- font-size: 14px;
203
+ font-size: 13px;
194
204
  overflow: hidden;
195
205
  text-overflow: ellipsis;
196
206
  white-space: nowrap;
207
+ border-bottom: 1px solid #efefef;
197
208
  }
198
209
 
199
210
  .page-list li a:hover {
@@ -203,26 +214,27 @@ a:hover {
203
214
 
204
215
  .page-list li a.active {
205
216
  background: var(--accent-light);
206
- color: var(--accent);
217
+ color: var(--namu-green-dark);
207
218
  font-weight: 600;
208
- border-right: 3px solid var(--accent);
219
+ border-right: 3px solid var(--namu-green);
209
220
  }
210
221
 
211
222
  /* Content */
212
223
  .content {
213
224
  flex: 1;
214
225
  margin-left: var(--sidebar-width);
215
- padding: 32px 48px;
216
- max-width: 900px;
226
+ padding: 24px 40px;
227
+ max-width: 860px;
217
228
  }
218
229
 
219
- /* Wiki page */
230
+ /* Wiki page - namuwiki style headings */
220
231
  .page-header h1 {
221
- font-size: 28px;
232
+ font-size: 26px;
222
233
  font-weight: 700;
223
- padding-bottom: 12px;
224
- border-bottom: 2px solid var(--accent);
225
- margin-bottom: 24px;
234
+ padding-bottom: 10px;
235
+ border-bottom: 3px solid var(--namu-green);
236
+ margin-bottom: 20px;
237
+ color: var(--text);
226
238
  }
227
239
 
228
240
  .page-body {
@@ -230,27 +242,35 @@ a:hover {
230
242
  }
231
243
 
232
244
  .page-body h2 {
233
- font-size: 22px;
245
+ font-size: 20px;
234
246
  font-weight: 700;
235
- margin: 32px 0 12px;
236
- padding-bottom: 6px;
237
- border-bottom: 1px solid var(--border);
247
+ margin: 28px 0 10px;
248
+ padding: 4px 10px;
249
+ background: var(--namu-green);
250
+ color: #ffffff;
251
+ border-radius: 2px;
238
252
  }
239
253
 
240
254
  .page-body h3 {
241
- font-size: 18px;
242
- font-weight: 600;
243
- margin: 24px 0 8px;
255
+ font-size: 17px;
256
+ font-weight: 700;
257
+ margin: 22px 0 8px;
258
+ padding: 3px 8px;
259
+ border-left: 4px solid var(--namu-green);
260
+ background: var(--accent-light);
261
+ color: var(--text);
244
262
  }
245
263
 
246
264
  .page-body h4 {
247
- font-size: 16px;
248
- font-weight: 600;
249
- margin: 20px 0 6px;
265
+ font-size: 15px;
266
+ font-weight: 700;
267
+ margin: 18px 0 6px;
268
+ padding-bottom: 4px;
269
+ border-bottom: 1px solid var(--border);
250
270
  }
251
271
 
252
272
  .page-body p {
253
- margin-bottom: 12px;
273
+ margin-bottom: 10px;
254
274
  }
255
275
 
256
276
  .page-body ul, .page-body ol {
@@ -258,31 +278,40 @@ a:hover {
258
278
  }
259
279
 
260
280
  .page-body li {
261
- margin-bottom: 4px;
281
+ margin-bottom: 3px;
282
+ }
283
+
284
+ /* Namuwiki-style strikethrough (humor) */
285
+ .page-body del {
286
+ color: var(--text-muted);
287
+ text-decoration: line-through;
288
+ font-size: 0.95em;
262
289
  }
263
290
 
264
291
  .page-body blockquote {
265
- border-left: 4px solid var(--accent);
266
- padding: 8px 16px;
267
- margin: 12px 0;
268
- background: var(--accent-light);
292
+ border-left: 3px solid var(--namu-green);
293
+ padding: 8px 14px;
294
+ margin: 10px 0;
295
+ background: #f0faf9;
269
296
  border-radius: 0 var(--radius) var(--radius) 0;
297
+ font-size: 14px;
270
298
  }
271
299
 
272
300
  .page-body code {
273
- background: var(--bg-alt);
274
- padding: 2px 6px;
275
- border-radius: 3px;
301
+ background: #f0f0f0;
302
+ padding: 2px 5px;
303
+ border-radius: 2px;
276
304
  font-size: 13px;
305
+ font-family: "JetBrains Mono", "D2Coding", monospace;
277
306
  }
278
307
 
279
308
  .page-body pre {
280
- background: #1e1e2e;
281
- color: #cdd6f4;
282
- padding: 16px;
309
+ background: #2b2b2b;
310
+ color: #e0e0e0;
311
+ padding: 14px;
283
312
  border-radius: var(--radius);
284
313
  overflow-x: auto;
285
- margin: 12px 0;
314
+ margin: 10px 0;
286
315
  }
287
316
 
288
317
  .page-body pre code {
@@ -294,45 +323,53 @@ a:hover {
294
323
  .page-body img {
295
324
  max-width: 100%;
296
325
  border-radius: var(--radius);
297
- margin: 12px 0;
326
+ margin: 10px 0;
298
327
  }
299
328
 
300
329
  .page-body table {
301
330
  width: 100%;
302
331
  border-collapse: collapse;
303
- margin: 12px 0;
332
+ margin: 10px 0;
333
+ font-size: 14px;
304
334
  }
305
335
 
306
336
  .page-body th, .page-body td {
307
- padding: 8px 12px;
337
+ padding: 6px 10px;
308
338
  border: 1px solid var(--border);
309
339
  text-align: left;
310
340
  }
311
341
 
312
342
  .page-body th {
313
- background: var(--bg-alt);
343
+ background: var(--accent-light);
314
344
  font-weight: 600;
345
+ color: var(--namu-green-dark);
315
346
  }
316
347
 
317
- /* TOC */
348
+ /* Bold emphasis - namuwiki loves bold */
349
+ .page-body strong {
350
+ color: var(--text);
351
+ font-weight: 800;
352
+ }
353
+
354
+ /* TOC - namuwiki style */
318
355
  .toc-box {
319
- background: var(--bg-alt);
356
+ background: #f5f5f5;
320
357
  border: 1px solid var(--border);
321
358
  border-radius: var(--radius);
322
- padding: 12px 16px;
323
- margin-bottom: 24px;
359
+ padding: 10px 14px;
360
+ margin-bottom: 20px;
324
361
  }
325
362
 
326
363
  .toc-box summary {
327
364
  font-weight: 700;
328
365
  cursor: pointer;
329
366
  font-size: 14px;
330
- color: var(--text-muted);
367
+ color: var(--namu-green-dark);
331
368
  }
332
369
 
333
370
  .toc-box .toc ul {
334
371
  list-style: none;
335
- margin: 8px 0 0 0;
372
+ margin: 6px 0 0 0;
336
373
  padding-left: 0;
337
374
  }
338
375
 
@@ -341,29 +378,29 @@ a:hover {
341
378
  }
342
379
 
343
380
  .toc-box .toc li {
344
- margin: 2px 0;
381
+ margin: 1px 0;
345
382
  }
346
383
 
347
384
  .toc-box .toc a {
348
- font-size: 14px;
349
- color: var(--text);
385
+ font-size: 13px;
386
+ color: var(--link);
350
387
  }
351
388
 
352
389
  .toc-box .toc a:hover {
353
- color: var(--link);
390
+ color: var(--link-hover);
354
391
  }
355
392
 
356
393
  /* Backlinks */
357
394
  .backlinks {
358
- margin-top: 40px;
359
- padding-top: 16px;
360
- border-top: 1px solid var(--border);
395
+ margin-top: 36px;
396
+ padding-top: 14px;
397
+ border-top: 2px solid var(--namu-green);
361
398
  }
362
399
 
363
400
  .backlinks h3 {
364
401
  font-size: 14px;
365
- color: var(--text-muted);
366
- font-weight: 600;
402
+ color: var(--namu-green-dark);
403
+ font-weight: 700;
367
404
  margin-bottom: 8px;
368
405
  }
369
406
 
@@ -371,45 +408,48 @@ a:hover {
371
408
  list-style: none;
372
409
  display: flex;
373
410
  flex-wrap: wrap;
374
- gap: 8px;
411
+ gap: 6px;
375
412
  }
376
413
 
377
414
  .backlinks li a {
378
415
  display: inline-block;
379
- padding: 4px 12px;
380
- background: var(--bg-alt);
381
- border: 1px solid var(--border);
382
- border-radius: var(--radius);
416
+ padding: 3px 10px;
417
+ background: var(--accent-light);
418
+ border: 1px solid var(--namu-green);
419
+ border-radius: 3px;
383
420
  font-size: 13px;
421
+ color: var(--namu-green-dark);
384
422
  }
385
423
 
386
424
  .backlinks li a:hover {
387
- background: var(--accent-light);
425
+ background: var(--namu-green);
426
+ color: #ffffff;
388
427
  text-decoration: none;
389
428
  }
390
429
 
391
430
  /* Index page */
392
431
  .hero {
393
432
  text-align: center;
394
- padding: 48px 0 32px;
433
+ padding: 40px 0 28px;
395
434
  }
396
435
 
397
436
  .hero-logo {
398
- width: 120px;
399
- height: 120px;
437
+ width: 100px;
438
+ height: 100px;
400
439
  object-fit: contain;
401
- margin-bottom: 16px;
440
+ margin-bottom: 12px;
402
441
  }
403
442
 
404
443
  .hero h1 {
405
- font-size: 36px;
444
+ font-size: 32px;
406
445
  border: none;
446
+ color: var(--namu-green-dark);
407
447
  }
408
448
 
409
449
  .hero-sub {
410
450
  color: var(--text-muted);
411
- font-size: 16px;
412
- margin-top: 8px;
451
+ font-size: 15px;
452
+ margin-top: 6px;
413
453
  }
414
454
 
415
455
  .index-grid {
@@ -418,23 +458,25 @@ a:hover {
418
458
  }
419
459
 
420
460
  .index-section h2 {
421
- font-size: 18px;
422
- margin-bottom: 16px;
423
- padding-bottom: 8px;
424
- border-bottom: 1px solid var(--border);
461
+ font-size: 17px;
462
+ margin-bottom: 12px;
463
+ padding: 4px 10px;
464
+ background: var(--namu-green);
465
+ color: #ffffff;
466
+ border-radius: 2px;
425
467
  }
426
468
 
427
469
  .page-cards {
428
470
  display: grid;
429
- grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
430
- gap: 10px;
431
- margin-bottom: 32px;
471
+ grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
472
+ gap: 8px;
473
+ margin-bottom: 28px;
432
474
  }
433
475
 
434
476
  .page-card {
435
477
  display: block;
436
- padding: 12px 16px;
437
- background: var(--bg-alt);
478
+ padding: 10px 14px;
479
+ background: var(--bg);
438
480
  border: 1px solid var(--border);
439
481
  border-radius: var(--radius);
440
482
  color: var(--text);
@@ -443,34 +485,36 @@ a:hover {
443
485
 
444
486
  .page-card:hover {
445
487
  background: var(--accent-light);
446
- border-color: var(--accent);
488
+ border-color: var(--namu-green);
447
489
  text-decoration: none;
448
490
  transform: translateY(-1px);
449
- box-shadow: 0 2px 8px rgba(0,0,0,0.06);
491
+ box-shadow: 0 2px 6px rgba(0,164,149,0.15);
450
492
  }
451
493
 
452
494
  .card-title {
453
495
  font-weight: 600;
454
- font-size: 14px;
496
+ font-size: 13px;
455
497
  }
456
498
 
457
499
  .quick-links {
458
500
  display: flex;
459
- gap: 12px;
460
- margin-bottom: 32px;
501
+ gap: 10px;
502
+ margin-bottom: 28px;
461
503
  }
462
504
 
463
505
  .quick-link {
464
- padding: 12px 20px;
465
- background: var(--bg-alt);
466
- border: 1px solid var(--border);
506
+ padding: 10px 18px;
507
+ background: var(--accent-light);
508
+ border: 1px solid var(--namu-green);
467
509
  border-radius: var(--radius);
468
510
  font-size: 14px;
469
- color: var(--text);
511
+ color: var(--namu-green-dark);
512
+ font-weight: 600;
470
513
  }
471
514
 
472
515
  .quick-link:hover {
473
- background: var(--accent-light);
516
+ background: var(--namu-green);
517
+ color: #ffffff;
474
518
  text-decoration: none;
475
519
  }
476
520
 
@@ -482,12 +526,13 @@ a:hover {
482
526
  .graph-page h1 {
483
527
  border: none;
484
528
  margin-bottom: 8px;
529
+ color: var(--namu-green-dark);
485
530
  }
486
531
 
487
532
  .graph-desc {
488
533
  color: var(--text-muted);
489
534
  font-size: 14px;
490
- margin-bottom: 16px;
535
+ margin-bottom: 14px;
491
536
  }
492
537
 
493
538
  #graph-container {
@@ -495,7 +540,7 @@ a:hover {
495
540
  height: calc(100vh - 200px);
496
541
  border: 1px solid var(--border);
497
542
  border-radius: var(--radius);
498
- background: var(--bg-alt);
543
+ background: #fafafa;
499
544
  }
500
545
 
501
546
  #graph-container svg {
@@ -505,9 +550,9 @@ a:hover {
505
550
 
506
551
  /* Permalink */
507
552
  .headerlink {
508
- color: var(--text-muted);
553
+ color: rgba(255,255,255,0.6);
509
554
  font-size: 0.7em;
510
- margin-left: 4px;
555
+ margin-left: 6px;
511
556
  opacity: 0;
512
557
  transition: opacity 0.2s;
513
558
  }
@@ -518,14 +563,23 @@ h4:hover .headerlink {
518
563
  opacity: 1;
519
564
  }
520
565
 
521
- /* Page type badge */
566
+ h3 .headerlink {
567
+ color: var(--text-muted);
568
+ }
569
+
570
+ h4 .headerlink {
571
+ color: var(--text-muted);
572
+ }
573
+
574
+ /* Page type badge - namuwiki style */
522
575
  .page-type-badge {
523
576
  display: inline-block;
524
- font-size: 12px;
525
- font-weight: 600;
526
- padding: 2px 10px;
527
- border-radius: 12px;
528
- margin-bottom: 8px;
577
+ font-size: 11px;
578
+ font-weight: 700;
579
+ padding: 2px 8px;
580
+ border-radius: 2px;
581
+ margin-bottom: 6px;
582
+ letter-spacing: 0.03em;
529
583
  }
530
584
 
531
585
  .page-type-badge.source {
@@ -535,10 +589,10 @@ h4:hover .headerlink {
535
589
 
536
590
  .page-type-badge.concept {
537
591
  background: var(--accent-light);
538
- color: #2e7d32;
592
+ color: var(--namu-green-dark);
539
593
  }
540
594
 
541
- /* Sidebar tabs */
595
+ /* Sidebar tabs - namuwiki style */
542
596
  .sidebar-tabs {
543
597
  display: flex;
544
598
  border-bottom: 1px solid var(--border);
@@ -551,11 +605,11 @@ h4:hover .headerlink {
551
605
 
552
606
  .sidebar-tab {
553
607
  flex: 1;
554
- padding: 10px 8px;
608
+ padding: 8px 6px;
555
609
  border: none;
556
610
  background: none;
557
- font-size: 13px;
558
- font-weight: 600;
611
+ font-size: 12px;
612
+ font-weight: 700;
559
613
  color: var(--text-muted);
560
614
  cursor: pointer;
561
615
  border-bottom: 2px solid transparent;
@@ -568,8 +622,8 @@ h4:hover .headerlink {
568
622
  }
569
623
 
570
624
  .sidebar-tab.active {
571
- color: var(--accent);
572
- border-bottom-color: var(--accent);
625
+ color: var(--namu-green);
626
+ border-bottom-color: var(--namu-green);
573
627
  }
574
628
 
575
629
  .sidebar-panel {
@@ -585,21 +639,21 @@ h4:hover .headerlink {
585
639
  display: flex;
586
640
  flex-wrap: wrap;
587
641
  align-items: center;
588
- gap: 6px;
589
- margin-bottom: 8px;
642
+ gap: 5px;
643
+ margin-bottom: 6px;
590
644
  }
591
645
 
592
646
  .backlink-label {
593
647
  font-size: 12px;
594
- font-weight: 600;
648
+ font-weight: 700;
595
649
  color: var(--text-muted);
596
- margin-right: 4px;
650
+ margin-right: 3px;
597
651
  }
598
652
 
599
653
  /* External refs */
600
654
  .external-refs {
601
- margin-top: 32px;
602
- padding: 16px;
655
+ margin-top: 28px;
656
+ padding: 14px;
603
657
  background: #f0f7ff;
604
658
  border: 1px solid #bdd7ee;
605
659
  border-radius: var(--radius);
@@ -608,8 +662,8 @@ h4:hover .headerlink {
608
662
  .external-refs h3 {
609
663
  font-size: 14px;
610
664
  color: #1565c0;
611
- font-weight: 600;
612
- margin-bottom: 8px;
665
+ font-weight: 700;
666
+ margin-bottom: 6px;
613
667
  }
614
668
 
615
669
  .external-refs ul {
@@ -619,7 +673,7 @@ h4:hover .headerlink {
619
673
  }
620
674
 
621
675
  .external-refs li {
622
- margin-bottom: 4px;
676
+ margin-bottom: 3px;
623
677
  }
624
678
 
625
679
  .external-refs a {
@@ -633,7 +687,7 @@ h4:hover .headerlink {
633
687
  }
634
688
 
635
689
  .backlink-item.concept {
636
- border-left: 3px solid #4caf50;
690
+ border-left: 3px solid var(--namu-green);
637
691
  }
638
692
 
639
693
  /* Page card types */
@@ -642,23 +696,23 @@ h4:hover .headerlink {
642
696
  }
643
697
 
644
698
  .page-card.concept {
645
- border-left: 3px solid #4caf50;
699
+ border-left: 3px solid var(--namu-green);
646
700
  }
647
701
 
648
702
  .card-badge {
649
703
  font-size: 12px;
650
- margin-right: 4px;
704
+ margin-right: 3px;
651
705
  }
652
706
 
653
707
  /* Add tabs */
654
708
  .add-tabs {
655
709
  display: flex;
656
710
  gap: 4px;
657
- margin-bottom: 12px;
711
+ margin-bottom: 10px;
658
712
  }
659
713
 
660
714
  .add-tab {
661
- padding: 6px 16px;
715
+ padding: 5px 14px;
662
716
  border: 1px solid var(--border);
663
717
  background: var(--bg-alt);
664
718
  border-radius: var(--radius);
@@ -668,9 +722,9 @@ h4:hover .headerlink {
668
722
  }
669
723
 
670
724
  .add-tab.active {
671
- background: var(--accent);
725
+ background: var(--namu-green);
672
726
  color: white;
673
- border-color: var(--accent);
727
+ border-color: var(--namu-green);
674
728
  }
675
729
 
676
730
  .add-panel {
@@ -688,7 +742,7 @@ h4:hover .headerlink {
688
742
  flex-direction: column;
689
743
  align-items: center;
690
744
  justify-content: center;
691
- padding: 20px;
745
+ padding: 18px;
692
746
  border: 2px dashed var(--border);
693
747
  border-radius: var(--radius);
694
748
  cursor: pointer;
@@ -697,7 +751,7 @@ h4:hover .headerlink {
697
751
  }
698
752
 
699
753
  .file-drop:hover, .file-drop.dragover {
700
- border-color: var(--accent);
754
+ border-color: var(--namu-green);
701
755
  background: var(--accent-light);
702
756
  }
703
757
 
@@ -717,12 +771,12 @@ h4:hover .headerlink {
717
771
  .add-form {
718
772
  display: flex;
719
773
  gap: 8px;
720
- margin-bottom: 12px;
774
+ margin-bottom: 10px;
721
775
  }
722
776
 
723
777
  .add-form input {
724
778
  flex: 1;
725
- padding: 10px 14px;
779
+ padding: 8px 12px;
726
780
  border: 1px solid var(--border);
727
781
  border-radius: var(--radius);
728
782
  font-size: 14px;
@@ -731,13 +785,13 @@ h4:hover .headerlink {
731
785
  }
732
786
 
733
787
  .add-form input:focus {
734
- border-color: var(--accent);
788
+ border-color: var(--namu-green);
735
789
  box-shadow: 0 0 0 2px var(--accent-light);
736
790
  }
737
791
 
738
792
  .add-form button {
739
- padding: 10px 20px;
740
- background: var(--accent);
793
+ padding: 8px 18px;
794
+ background: var(--namu-green);
741
795
  color: white;
742
796
  border: none;
743
797
  border-radius: var(--radius);
@@ -749,7 +803,7 @@ h4:hover .headerlink {
749
803
  }
750
804
 
751
805
  .add-form button:hover {
752
- background: #43a047;
806
+ background: var(--accent-dark);
753
807
  }
754
808
 
755
809
  .add-form button:disabled {
@@ -758,7 +812,7 @@ h4:hover .headerlink {
758
812
  }
759
813
 
760
814
  .add-status {
761
- padding: 10px 14px;
815
+ padding: 8px 12px;
762
816
  border-radius: var(--radius);
763
817
  font-size: 14px;
764
818
  }
@@ -771,8 +825,8 @@ h4:hover .headerlink {
771
825
 
772
826
  .add-status.success {
773
827
  background: var(--accent-light);
774
- color: #2e7d32;
775
- border: 1px solid #a5d6a7;
828
+ color: var(--namu-green-dark);
829
+ border: 1px solid var(--namu-green);
776
830
  }
777
831
 
778
832
  .add-status.error {
@@ -784,15 +838,15 @@ h4:hover .headerlink {
784
838
  /* Usage stats */
785
839
  .stats-grid {
786
840
  display: flex;
787
- gap: 10px;
841
+ gap: 8px;
788
842
  flex-wrap: wrap;
789
- margin-top: 12px;
843
+ margin-top: 10px;
790
844
  }
791
845
 
792
846
  .stat-card {
793
847
  flex: 1;
794
- min-width: 100px;
795
- padding: 12px 16px;
848
+ min-width: 90px;
849
+ padding: 10px 14px;
796
850
  background: var(--bg-alt);
797
851
  border: 1px solid var(--border);
798
852
  border-radius: var(--radius);
@@ -801,23 +855,23 @@ h4:hover .headerlink {
801
855
 
802
856
  .stat-card.accent {
803
857
  background: var(--accent-light);
804
- border-color: var(--accent);
858
+ border-color: var(--namu-green);
805
859
  }
806
860
 
807
861
  .stat-value {
808
- font-size: 20px;
862
+ font-size: 18px;
809
863
  font-weight: 700;
810
864
  color: var(--text);
811
865
  }
812
866
 
813
867
  .stat-card.accent .stat-value {
814
- color: #2e7d32;
868
+ color: var(--namu-green-dark);
815
869
  }
816
870
 
817
871
  .stat-label {
818
- font-size: 12px;
872
+ font-size: 11px;
819
873
  color: var(--text-muted);
820
- margin-top: 4px;
874
+ margin-top: 3px;
821
875
  }
822
876
 
823
877
  /* Graph legend */
@@ -835,7 +889,7 @@ h4:hover .headerlink {
835
889
  }
836
890
 
837
891
  .legend-dot.concept {
838
- background: #4caf50;
892
+ background: var(--namu-green);
839
893
  }
840
894
 
841
895
  /* Responsive */
@@ -845,9 +899,9 @@ h4:hover .headerlink {
845
899
  }
846
900
  .content {
847
901
  margin-left: 0;
848
- padding: 20px 16px;
902
+ padding: 16px 14px;
849
903
  }
850
904
  .topbar-search {
851
- max-width: 200px;
905
+ max-width: 180px;
852
906
  }
853
907
  }