1/*
2 * μΉ μ κ·Όμ± μμ μ€νμΌ
3 * - κ³ λλΉ μμ
4 * - ν¬μ»€μ€ νμ
5 * - λ°μν λμμΈ
6 */
7
8/* ============================================
9 κΈ°λ³Έ μ€νμΌ
10 ============================================ */
11
12* {
13 margin: 0;
14 padding: 0;
15 box-sizing: border-box;
16}
17
18:root {
19 /* κ³ λλΉ μμ νλ νΈ */
20 --color-primary: #0056b3;
21 --color-primary-dark: #003d7a;
22 --color-secondary: #495057;
23 --color-success: #198754;
24 --color-warning: #ffc107;
25 --color-danger: #dc3545;
26 --color-text: #212529;
27 --color-text-muted: #6c757d;
28 --color-bg: #ffffff;
29 --color-bg-alt: #f8f9fa;
30 --color-border: #dee2e6;
31
32 /* ν¬μ»€μ€ λ§ */
33 --focus-ring: 0 0 0 3px rgba(0, 86, 179, 0.5);
34 --focus-ring-offset: 2px;
35}
36
37body {
38 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
39 font-size: 16px;
40 line-height: 1.6;
41 color: var(--color-text);
42 background-color: var(--color-bg);
43}
44
45/* ============================================
46 Skip Link (건λλ°κΈ° λ§ν¬)
47 ============================================ */
48
49.skip-link {
50 position: absolute;
51 top: -100%;
52 left: 50%;
53 transform: translateX(-50%);
54 background: var(--color-primary);
55 color: white;
56 padding: 12px 24px;
57 border-radius: 0 0 8px 8px;
58 text-decoration: none;
59 font-weight: 600;
60 z-index: 1000;
61 transition: top 0.3s;
62}
63
64.skip-link:focus {
65 top: 0;
66 outline: none;
67 box-shadow: var(--focus-ring);
68}
69
70/* ============================================
71 μ€ν¬λ¦° 리λ μ μ© ν
μ€νΈ
72 ============================================ */
73
74.sr-only {
75 position: absolute;
76 width: 1px;
77 height: 1px;
78 padding: 0;
79 margin: -1px;
80 overflow: hidden;
81 clip: rect(0, 0, 0, 0);
82 white-space: nowrap;
83 border: 0;
84}
85
86/* ============================================
87 ν€λ & λ€λΉκ²μ΄μ
88 ============================================ */
89
90header {
91 background: var(--color-primary);
92 padding: 15px 20px;
93 position: sticky;
94 top: 0;
95 z-index: 100;
96}
97
98.nav-list {
99 list-style: none;
100 display: flex;
101 flex-wrap: wrap;
102 gap: 10px;
103 justify-content: center;
104 max-width: 1200px;
105 margin: 0 auto;
106}
107
108.nav-list a {
109 color: white;
110 text-decoration: none;
111 padding: 8px 16px;
112 border-radius: 4px;
113 transition: background 0.2s;
114}
115
116.nav-list a:hover,
117.nav-list a:focus {
118 background: rgba(255, 255, 255, 0.2);
119 outline: none;
120}
121
122.nav-list a[aria-current="page"] {
123 background: rgba(255, 255, 255, 0.3);
124 font-weight: 600;
125}
126
127/* ============================================
128 λ©μΈ 컨ν
μΈ
129 ============================================ */
130
131main {
132 max-width: 900px;
133 margin: 0 auto;
134 padding: 40px 20px;
135}
136
137h1 {
138 font-size: 2.2rem;
139 margin-bottom: 20px;
140 color: var(--color-primary-dark);
141}
142
143h2 {
144 font-size: 1.6rem;
145 margin: 40px 0 20px;
146 padding-bottom: 10px;
147 border-bottom: 3px solid var(--color-primary);
148 color: var(--color-primary-dark);
149}
150
151h3 {
152 font-size: 1.3rem;
153 margin: 25px 0 15px;
154 color: var(--color-secondary);
155}
156
157h4 {
158 font-size: 1.1rem;
159 margin: 15px 0 10px;
160}
161
162.intro {
163 font-size: 1.1rem;
164 color: var(--color-text-muted);
165 margin-bottom: 30px;
166}
167
168section {
169 margin-bottom: 50px;
170}
171
172article {
173 margin-bottom: 30px;
174}
175
176/* ============================================
177 μμ λ°μ€
178 ============================================ */
179
180.example-box {
181 background: var(--color-bg-alt);
182 border: 1px solid var(--color-border);
183 border-radius: 8px;
184 padding: 20px;
185 margin: 15px 0;
186}
187
188pre {
189 background: #2d2d2d;
190 color: #f8f8f2;
191 padding: 15px;
192 border-radius: 4px;
193 overflow-x: auto;
194 font-size: 0.9rem;
195}
196
197code {
198 font-family: 'Fira Code', 'Consolas', monospace;
199}
200
201/* ============================================
202 μ΄λ―Έμ§ μμ
203 ============================================ */
204
205.image-examples {
206 display: flex;
207 flex-wrap: wrap;
208 gap: 20px;
209}
210
211figure {
212 text-align: center;
213}
214
215figcaption {
216 margin-top: 10px;
217 font-size: 0.9rem;
218 color: var(--color-text-muted);
219}
220
221/* ============================================
222 μλ¦Ό & μν λ©μμ§
223 ============================================ */
224
225.alert {
226 padding: 15px;
227 border-radius: 8px;
228 margin-bottom: 15px;
229}
230
231.alert-warning {
232 background: #fff3cd;
233 border: 1px solid #ffc107;
234 color: #856404;
235}
236
237.status-message {
238 padding: 10px 15px;
239 background: #d4edda;
240 border: 1px solid #28a745;
241 border-radius: 4px;
242 color: #155724;
243 margin-bottom: 15px;
244}
245
246.live-region {
247 padding: 15px;
248 background: #e7f3ff;
249 border: 2px dashed var(--color-primary);
250 border-radius: 8px;
251 margin-top: 10px;
252 min-height: 60px;
253}
254
255/* ============================================
256 μμ½λμΈ
257 ============================================ */
258
259.accordion-button {
260 width: 100%;
261 display: flex;
262 justify-content: space-between;
263 align-items: center;
264 padding: 15px;
265 background: var(--color-primary);
266 color: white;
267 border: none;
268 border-radius: 8px;
269 font-size: 1rem;
270 cursor: pointer;
271 transition: background 0.2s;
272}
273
274.accordion-button:hover {
275 background: var(--color-primary-dark);
276}
277
278.accordion-button:focus {
279 outline: none;
280 box-shadow: var(--focus-ring);
281}
282
283.accordion-button[aria-expanded="true"] .icon {
284 transform: rotate(180deg);
285}
286
287.icon {
288 transition: transform 0.3s;
289}
290
291.accordion-content {
292 padding: 20px;
293 background: white;
294 border: 1px solid var(--color-border);
295 border-top: none;
296 border-radius: 0 0 8px 8px;
297}
298
299/* ============================================
300 μ§νλ₯ νμ
301 ============================================ */
302
303.progress-demo {
304 margin: 20px 0;
305}
306
307.progress-bar {
308 height: 30px;
309 background: var(--color-border);
310 border-radius: 15px;
311 overflow: hidden;
312 margin-top: 10px;
313}
314
315.progress-fill {
316 height: 100%;
317 background: var(--color-success);
318 display: flex;
319 align-items: center;
320 justify-content: center;
321 color: white;
322 font-weight: 600;
323 transition: width 0.3s;
324}
325
326/* ============================================
327 ν
328 ============================================ */
329
330.tabs-demo {
331 margin-top: 20px;
332}
333
334[role="tablist"] {
335 display: flex;
336 border-bottom: 2px solid var(--color-border);
337}
338
339[role="tab"] {
340 padding: 12px 24px;
341 background: transparent;
342 border: none;
343 border-bottom: 3px solid transparent;
344 margin-bottom: -2px;
345 cursor: pointer;
346 font-size: 1rem;
347 transition: all 0.2s;
348}
349
350[role="tab"]:hover {
351 background: var(--color-bg-alt);
352}
353
354[role="tab"]:focus {
355 outline: none;
356 box-shadow: inset 0 0 0 2px var(--color-primary);
357}
358
359[role="tab"][aria-selected="true"] {
360 border-bottom-color: var(--color-primary);
361 color: var(--color-primary);
362 font-weight: 600;
363}
364
365[role="tabpanel"] {
366 padding: 20px;
367 border: 1px solid var(--color-border);
368 border-top: none;
369}
370
371[role="tabpanel"]:focus {
372 outline: 2px solid var(--color-primary);
373 outline-offset: -2px;
374}
375
376/* ============================================
377 νΌ μ€νμΌ
378 ============================================ */
379
380form {
381 background: var(--color-bg-alt);
382 padding: 30px;
383 border-radius: 12px;
384 border: 1px solid var(--color-border);
385}
386
387fieldset {
388 border: 1px solid var(--color-border);
389 border-radius: 8px;
390 padding: 20px;
391 margin-bottom: 25px;
392}
393
394legend {
395 font-weight: 600;
396 color: var(--color-primary-dark);
397 padding: 0 10px;
398}
399
400.form-group {
401 margin-bottom: 20px;
402}
403
404label {
405 display: block;
406 margin-bottom: 8px;
407 font-weight: 500;
408}
409
410.required {
411 color: var(--color-danger);
412}
413
414input[type="text"],
415input[type="email"],
416input[type="tel"],
417input[type="search"],
418select,
419textarea {
420 width: 100%;
421 padding: 12px;
422 border: 2px solid var(--color-border);
423 border-radius: 6px;
424 font-size: 1rem;
425 transition: border-color 0.2s, box-shadow 0.2s;
426}
427
428input:focus,
429select:focus,
430textarea:focus {
431 outline: none;
432 border-color: var(--color-primary);
433 box-shadow: var(--focus-ring);
434}
435
436input[aria-invalid="true"] {
437 border-color: var(--color-danger);
438}
439
440.hint {
441 display: block;
442 margin-top: 5px;
443 font-size: 0.85rem;
444 color: var(--color-text-muted);
445}
446
447.error {
448 display: block;
449 margin-top: 5px;
450 font-size: 0.85rem;
451 color: var(--color-danger);
452}
453
454/* Radio & Checkbox */
455.radio-group,
456.checkbox-group {
457 display: flex;
458 flex-wrap: wrap;
459 gap: 15px;
460}
461
462.radio-option,
463.checkbox-option {
464 display: flex;
465 align-items: center;
466 gap: 8px;
467}
468
469input[type="radio"],
470input[type="checkbox"] {
471 width: 20px;
472 height: 20px;
473 accent-color: var(--color-primary);
474}
475
476input[type="radio"]:focus,
477input[type="checkbox"]:focus {
478 outline: none;
479 box-shadow: var(--focus-ring);
480}
481
482/* λ²νΌ */
483.btn-primary,
484.btn-secondary {
485 padding: 12px 24px;
486 border: none;
487 border-radius: 6px;
488 font-size: 1rem;
489 font-weight: 500;
490 cursor: pointer;
491 transition: all 0.2s;
492}
493
494.btn-primary {
495 background: var(--color-primary);
496 color: white;
497}
498
499.btn-primary:hover {
500 background: var(--color-primary-dark);
501}
502
503.btn-secondary {
504 background: var(--color-secondary);
505 color: white;
506}
507
508.btn-secondary:hover {
509 background: #343a40;
510}
511
512.btn-primary:focus,
513.btn-secondary:focus {
514 outline: none;
515 box-shadow: var(--focus-ring);
516}
517
518.form-actions {
519 display: flex;
520 gap: 15px;
521 margin-top: 20px;
522}
523
524/* ============================================
525 ν€λ³΄λ λ¨μΆν€ ν
μ΄λΈ
526 ============================================ */
527
528.keyboard-shortcuts {
529 width: 100%;
530 border-collapse: collapse;
531 margin: 15px 0;
532}
533
534.keyboard-shortcuts caption {
535 text-align: left;
536 font-weight: 600;
537 margin-bottom: 10px;
538 color: var(--color-text-muted);
539}
540
541.keyboard-shortcuts th,
542.keyboard-shortcuts td {
543 padding: 12px 15px;
544 text-align: left;
545 border: 1px solid var(--color-border);
546}
547
548.keyboard-shortcuts th {
549 background: var(--color-primary);
550 color: white;
551}
552
553.keyboard-shortcuts tr:nth-child(even) {
554 background: var(--color-bg-alt);
555}
556
557kbd {
558 display: inline-block;
559 padding: 3px 8px;
560 font-family: monospace;
561 background: #eee;
562 border: 1px solid #ccc;
563 border-radius: 4px;
564 box-shadow: 0 2px 0 #999;
565}
566
567/* ============================================
568 컀μ€ν
리μ€νΈλ°μ€
569 ============================================ */
570
571.custom-listbox {
572 list-style: none;
573 border: 2px solid var(--color-border);
574 border-radius: 8px;
575 overflow: hidden;
576 max-width: 300px;
577}
578
579.custom-listbox:focus {
580 outline: none;
581 border-color: var(--color-primary);
582 box-shadow: var(--focus-ring);
583}
584
585.custom-listbox [role="option"] {
586 padding: 12px 15px;
587 cursor: pointer;
588 transition: background 0.2s;
589}
590
591.custom-listbox [role="option"]:hover {
592 background: var(--color-bg-alt);
593}
594
595.custom-listbox [role="option"][aria-selected="true"] {
596 background: var(--color-primary);
597 color: white;
598}
599
600/* ============================================
601 λͺ¨λ¬
602 ============================================ */
603
604.modal {
605 position: fixed;
606 top: 50%;
607 left: 50%;
608 transform: translate(-50%, -50%);
609 background: white;
610 padding: 30px;
611 border-radius: 12px;
612 box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
613 z-index: 1001;
614 max-width: 500px;
615 width: 90%;
616}
617
618.modal-overlay {
619 position: fixed;
620 top: 0;
621 left: 0;
622 right: 0;
623 bottom: 0;
624 background: rgba(0, 0, 0, 0.5);
625 z-index: 1000;
626}
627
628.modal-content h2 {
629 margin: 0 0 15px;
630 border: none;
631 padding: 0;
632}
633
634.modal-content p {
635 margin-bottom: 20px;
636}
637
638.modal-actions {
639 display: flex;
640 gap: 10px;
641 justify-content: flex-end;
642}
643
644/* ============================================
645 ν¬μ»€μ€ νΈλ© μμ
646 ============================================ */
647
648.focus-trap-area {
649 padding: 20px;
650 border: 3px dashed var(--color-primary);
651 border-radius: 8px;
652 display: flex;
653 flex-wrap: wrap;
654 gap: 15px;
655}
656
657.focus-trap-area button,
658.focus-trap-area input,
659.focus-trap-area a {
660 padding: 10px 20px;
661}
662
663/* ============================================
664 μμ λλΉ μμ
665 ============================================ */
666
667.contrast-examples {
668 display: grid;
669 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
670 gap: 20px;
671}
672
673.contrast-good {
674 background: #1a1a1a;
675 color: #ffffff;
676 padding: 20px;
677 border-radius: 8px;
678}
679
680.contrast-good h3 {
681 color: #ffffff;
682}
683
684.contrast-bad {
685 background: #dddddd;
686 color: #999999;
687 padding: 20px;
688 border-radius: 8px;
689}
690
691.contrast-bad h3 {
692 color: #aaaaaa;
693}
694
695/* ============================================
696 νΈν°
697 ============================================ */
698
699footer {
700 background: var(--color-secondary);
701 color: white;
702 padding: 30px 20px;
703 text-align: center;
704 margin-top: 50px;
705}
706
707footer a {
708 color: #a0d2ff;
709}
710
711footer a:hover {
712 color: white;
713}
714
715/* ============================================
716 ν¬μ»€μ€ νμ κ°ν
717 ============================================ */
718
719/* λͺ¨λ ν¬μ»€μ€ κ°λ₯ν μμμ λͺ
νν ν¬μ»€μ€ νμ */
720a:focus,
721button:focus,
722[tabindex]:focus {
723 outline: 3px solid var(--color-primary);
724 outline-offset: 2px;
725}
726
727/* ============================================
728 λ°μν
729 ============================================ */
730
731@media (max-width: 600px) {
732 h1 {
733 font-size: 1.8rem;
734 }
735
736 h2 {
737 font-size: 1.4rem;
738 }
739
740 .nav-list {
741 flex-direction: column;
742 align-items: center;
743 }
744
745 .form-actions {
746 flex-direction: column;
747 }
748
749 .btn-primary,
750 .btn-secondary {
751 width: 100%;
752 }
753}
754
755/* ============================================
756 κ³ λλΉ λͺ¨λ μ§μ
757 ============================================ */
758
759@media (prefers-contrast: high) {
760 :root {
761 --color-primary: #0000ff;
762 --color-border: #000000;
763 }
764
765 * {
766 border-color: #000 !important;
767 }
768}
769
770/* ============================================
771 λͺ¨μ
κ°μ λͺ¨λ
772 ============================================ */
773
774@media (prefers-reduced-motion: reduce) {
775 * {
776 animation: none !important;
777 transition: none !important;
778 }
779}