newtil-css 0.2.94 → 0.2.96

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.
Files changed (3) hide show
  1. package/dist/style.css +86 -4536
  2. package/dist/utils.css +1642 -7316
  3. package/package.json +1 -1
package/dist/style.css CHANGED
@@ -10967,3160 +10967,6 @@ Variables 커스터마이징:
10967
10967
  writing-mode: vertical-rl !important;
10968
10968
  }
10969
10969
  }
10970
- /* ===== INTERACTIONS (상호작용) ===== */
10971
- /* ===== STATES & PSEUDO-CLASSES UTILITIES ===== */
10972
- /* CSS 속성명과 값을 그대로 유지하는 NewTil CSS 철학 */
10973
- /* 상태별 스타일링: hover, focus, active, disabled 등 */
10974
- /* ===== HOVER STATES ===== */
10975
- /* hover: 모든 유틸리티 클래스는 hover: 접두사로 사용 가능 */
10976
- /* 예시: hover:background-color:main-1, hover:bg:main-1 */
10977
- /* 일반적인 hover 효과들 */
10978
- .hover\:opacity\:75:hover {
10979
- opacity: var(--opacity-75) !important;
10980
- }
10981
- .hover\:opacity\:50:hover {
10982
- opacity: var(--opacity-50) !important;
10983
- }
10984
- .hover\:opacity\:100:hover {
10985
- opacity: var(--opacity-100) !important;
10986
- }
10987
- /* transform hover 효과 */
10988
- .hover\:transform\:scale\(1\.05\):hover,
10989
- .hover\:scale\:105:hover {
10990
- transform: scale(1.05) !important;
10991
- }
10992
- .hover\:transform\:scale\(1\.1\):hover,
10993
- .hover\:scale\:110:hover {
10994
- transform: scale(1.1) !important;
10995
- }
10996
- .hover\:transform\:scale\(0\.95\):hover,
10997
- .hover\:scale\:95:hover {
10998
- transform: scale(0.95) !important;
10999
- }
11000
- .hover\:transform\:translateY\(-2px\):hover,
11001
- .hover\:translate-y\:-2:hover {
11002
- transform: translateY(-2px) !important;
11003
- }
11004
- .hover\:transform\:translateY\(-4px\):hover,
11005
- .hover\:translate-y\:-4:hover {
11006
- transform: translateY(-4px) !important;
11007
- }
11008
- /* shadow hover 효과 */
11009
- .hover\:box-shadow\:md:hover,
11010
- .hover\:shadow\:md:hover {
11011
- box-shadow: var(--shadow-md) !important;
11012
- }
11013
- .hover\:box-shadow\:lg:hover,
11014
- .hover\:shadow\:lg:hover {
11015
- box-shadow: var(--shadow-lg) !important;
11016
- }
11017
- .hover\:box-shadow\:xl:hover,
11018
- .hover\:shadow\:xl:hover {
11019
- box-shadow: var(--shadow-xl) !important;
11020
- }
11021
- .hover\:box-shadow\:none:hover,
11022
- .hover\:shadow\:none:hover {
11023
- box-shadow: var(--shadow-none) !important;
11024
- }
11025
- /* ===== FOCUS STATES ===== */
11026
- /* focus visible (접근성 친화적) */
11027
- .focus\:outline\:2px:focus-visible,
11028
- .focus\:outline\:2:focus-visible {
11029
- outline: 2px solid var(--color-main-1) !important;
11030
- outline-offset: 2px !important;
11031
- }
11032
- .focus\:outline\:none:focus,
11033
- .focus\:no-outline:focus {
11034
- outline: none !important;
11035
- }
11036
- .focus\:ring\:2:focus-visible,
11037
- .focus\:ring\:2:focus {
11038
- box-shadow: 0 0 0 2px var(--color-main-1) !important;
11039
- }
11040
- .focus\:ring\:4:focus-visible,
11041
- .focus\:ring\:4:focus {
11042
- box-shadow: 0 0 0 4px var(--color-main-1) !important;
11043
- }
11044
- /* focus 시 색상 변경 */
11045
- .focus\:background-color\:main-1:focus,
11046
- .focus\:bg\:main-1:focus {
11047
- background-color: var(--color-main-1) !important;
11048
- }
11049
- .focus\:background-color\:base-2:focus,
11050
- .focus\:bg\:base-2:focus {
11051
- background-color: var(--color-base-2) !important;
11052
- }
11053
- .focus\:color\:white:focus,
11054
- .focus\:tc\:white:focus {
11055
- color: var(--color-white) !important;
11056
- }
11057
- /* ===== ACTIVE STATES ===== */
11058
- .active\:transform\:scale\(0\.95\):active,
11059
- .active\:scale\:95:active {
11060
- transform: scale(0.95) !important;
11061
- }
11062
- .active\:transform\:scale\(0\.98\):active,
11063
- .active\:scale\:98:active {
11064
- transform: scale(0.98) !important;
11065
- }
11066
- .active\:opacity\:75:active {
11067
- opacity: var(--opacity-75) !important;
11068
- }
11069
- .active\:opacity\:50:active {
11070
- opacity: var(--opacity-50) !important;
11071
- }
11072
- /* ===== DISABLED STATES ===== */
11073
- .disabled\:opacity\:50:disabled,
11074
- .disabled\:opacity\:50[disabled] {
11075
- opacity: var(--opacity-50) !important;
11076
- }
11077
- .disabled\:cursor\:not-allowed:disabled,
11078
- .disabled\:cursor\:not-allowed[disabled] {
11079
- cursor: not-allowed !important;
11080
- }
11081
- .disabled\:background-color\:base-3:disabled,
11082
- .disabled\:bg\:base-3:disabled,
11083
- .disabled\:background-color\:base-3[disabled],
11084
- .disabled\:bg\:base-3[disabled] {
11085
- background-color: var(--color-base-3) !important;
11086
- }
11087
- .disabled\:color\:base-5:disabled,
11088
- .disabled\:tc\:base-5:disabled,
11089
- .disabled\:color\:base-5[disabled],
11090
- .disabled\:tc\:base-5[disabled] {
11091
- color: var(--color-base-5) !important;
11092
- }
11093
- .disabled\:pointer-events\:none:disabled,
11094
- .disabled\:pointer\:none:disabled,
11095
- .disabled\:pointer-events\:none[disabled],
11096
- .disabled\:pointer\:none[disabled] {
11097
- pointer-events: none !important;
11098
- }
11099
- /* ===== CHECKED STATES ===== */
11100
- .checked\:background-color\:main-1:checked,
11101
- .checked\:bg\:main-1:checked {
11102
- background-color: var(--color-main-1) !important;
11103
- }
11104
- .checked\:color\:white:checked,
11105
- .checked\:tc\:white:checked {
11106
- color: var(--color-white) !important;
11107
- }
11108
- .checked\:border-color\:main-1:checked,
11109
- .checked\:bd-c\:main-1:checked {
11110
- border-color: var(--color-main-1) !important;
11111
- }
11112
- /* ===== FIRST/LAST CHILD ===== */
11113
- .first\:margin-top\:0:first-child,
11114
- .first\:mt\:0:first-child {
11115
- margin-top: var(--space-0) !important;
11116
- }
11117
- .last\:margin-bottom\:0:last-child,
11118
- .last\:mb\:0:last-child {
11119
- margin-bottom: var(--space-0) !important;
11120
- }
11121
- .first\:border-top-left-radius\:md:first-child,
11122
- .first\:rounded-tl\:md:first-child {
11123
- border-top-left-radius: var(--radius-md) !important;
11124
- }
11125
- .first\:border-top-right-radius\:md:first-child,
11126
- .first\:rounded-tr\:md:first-child {
11127
- border-top-right-radius: var(--radius-md) !important;
11128
- }
11129
- .last\:border-bottom-left-radius\:md:last-child,
11130
- .last\:rounded-bl\:md:last-child {
11131
- border-bottom-left-radius: var(--radius-md) !important;
11132
- }
11133
- .last\:border-bottom-right-radius\:md:last-child,
11134
- .last\:rounded-br\:md:last-child {
11135
- border-bottom-right-radius: var(--radius-md) !important;
11136
- }
11137
- /* ===== NTH-CHILD ===== */
11138
- .odd\:background-color\:base-1:nth-child(odd),
11139
- .odd\:bg\:base-1:nth-child(odd) {
11140
- background-color: var(--color-base-1) !important;
11141
- }
11142
- .even\:background-color\:base-2:nth-child(even),
11143
- .even\:bg\:base-2:nth-child(even) {
11144
- background-color: var(--color-base-2) !important;
11145
- }
11146
- .odd\:background-color\:white:nth-child(odd),
11147
- .odd\:bg\:white:nth-child(odd) {
11148
- background-color: var(--color-white) !important;
11149
- }
11150
- .even\:background-color\:base-1:nth-child(even),
11151
- .even\:bg\:base-1:nth-child(even) {
11152
- background-color: var(--color-base-1) !important;
11153
- }
11154
- /* ===== GROUP STATES (부모 hover시 자식 변경) ===== */
11155
- .group:hover .group-hover\:opacity\:75,
11156
- .group:hover .gh\:opacity\:75 {
11157
- opacity: var(--opacity-75) !important;
11158
- }
11159
- .group:hover .group-hover\:opacity\:100,
11160
- .group:hover .gh\:opacity\:100 {
11161
- opacity: var(--opacity-100) !important;
11162
- }
11163
- .group:hover .group-hover\:transform\:scale\(1\.05\),
11164
- .group:hover .gh\:scale\:105 {
11165
- transform: scale(1.05) !important;
11166
- }
11167
- .group:hover .group-hover\:transform\:translateX\(4px\),
11168
- .group:hover .gh\:translate-x\:4 {
11169
- transform: translateX(4px) !important;
11170
- }
11171
- .group:hover .group-hover\:color\:main-1,
11172
- .group:hover .gh\:tc\:main-1 {
11173
- color: var(--color-main-1) !important;
11174
- }
11175
- .group:hover .group-hover\:background-color\:main-1,
11176
- .group:hover .gh\:bg\:main-1 {
11177
- background-color: var(--color-main-1) !important;
11178
- }
11179
- /* ===== PEER STATES (형제 요소 상태에 따른 변경) ===== */
11180
- .peer:hover ~ .peer-hover\:opacity\:75,
11181
- .peer:hover ~ .ph\:opacity\:75 {
11182
- opacity: var(--opacity-75) !important;
11183
- }
11184
- .peer:focus ~ .peer-focus\:opacity\:100,
11185
- .peer:focus ~ .pf\:opacity\:100 {
11186
- opacity: var(--opacity-100) !important;
11187
- }
11188
- .peer:checked ~ .peer-checked\:background-color\:main-1,
11189
- .peer:checked ~ .pc\:bg\:main-1 {
11190
- background-color: var(--color-main-1) !important;
11191
- }
11192
- .peer:checked ~ .peer-checked\:color\:white,
11193
- .peer:checked ~ .pc\:tc\:white {
11194
- color: var(--color-white) !important;
11195
- }
11196
- /* ===== RESPONSIVE STATES ===== */
11197
- /* Small screens (640px+) */
11198
- @media (min-width: 640px) {
11199
- .sm\:hover\:scale\:105:hover {
11200
- transform: scale(1.05) !important;
11201
- }
11202
- .sm\:hover\:shadow\:lg:hover {
11203
- box-shadow: var(--shadow-lg) !important;
11204
- }
11205
- .sm\:focus\:ring\:2:focus {
11206
- box-shadow: 0 0 0 2px var(--color-main-1) !important;
11207
- }
11208
- }
11209
- /* Medium screens (768px+) */
11210
- @media (min-width: 768px) {
11211
- .md\:hover\:scale\:105:hover {
11212
- transform: scale(1.05) !important;
11213
- }
11214
- .md\:hover\:shadow\:lg:hover {
11215
- box-shadow: var(--shadow-lg) !important;
11216
- }
11217
- .md\:focus\:ring\:2:focus {
11218
- box-shadow: 0 0 0 2px var(--color-main-1) !important;
11219
- }
11220
- }
11221
- /* Large screens (1024px+) */
11222
- @media (min-width: 1024px) {
11223
- .lg\:hover\:scale\:105:hover {
11224
- transform: scale(1.05) !important;
11225
- }
11226
- .lg\:hover\:shadow\:lg:hover {
11227
- box-shadow: var(--shadow-lg) !important;
11228
- }
11229
- .lg\:focus\:ring\:2:focus {
11230
- box-shadow: 0 0 0 2px var(--color-main-1) !important;
11231
- }
11232
- }
11233
- /* Extra large screens (1280px+) */
11234
- @media (min-width: 1280px) {
11235
- .xl\:hover\:scale\:105:hover {
11236
- transform: scale(1.05) !important;
11237
- }
11238
- .xl\:hover\:shadow\:lg:hover {
11239
- box-shadow: var(--shadow-lg) !important;
11240
- }
11241
- .xl\:focus\:ring\:2:focus {
11242
- box-shadow: 0 0 0 2px var(--color-main-1) !important;
11243
- }
11244
- }
11245
- /* ===== PRINT STATES ===== */
11246
- @media print {
11247
- .print\:hidden {
11248
- display: none !important;
11249
- }
11250
- .print\:block {
11251
- display: block !important;
11252
- }
11253
- .print\:inline {
11254
- display: inline !important;
11255
- }
11256
- }
11257
- /* ===== MOTION PREFERENCES ===== */
11258
- @media (prefers-reduced-motion: reduce) {
11259
- .motion-reduce\:transform\:none {
11260
- transform: none !important;
11261
- }
11262
-
11263
- .motion-reduce\:transition\:none {
11264
- transition: none !important;
11265
- }
11266
- }
11267
- @media (prefers-reduced-motion: no-preference) {
11268
- .motion-safe\:transition\:all {
11269
- transition: all 150ms ease !important;
11270
- }
11271
- }
11272
- /* ===== DARK MODE STATES ===== */
11273
- @media (prefers-color-scheme: dark) {
11274
- .dark\:background-color\:base-9,
11275
- .dark\:bg\:base-9 {
11276
- background-color: var(--color-base-9) !important;
11277
- }
11278
-
11279
- .dark\:color\:base-1,
11280
- .dark\:tc\:base-1 {
11281
- color: var(--color-base-1) !important;
11282
- }
11283
-
11284
- .dark\:border-color\:base-7,
11285
- .dark\:bd-c\:base-7 {
11286
- border-color: var(--color-base-7) !important;
11287
- }
11288
- }
11289
- /* 수동 dark mode 클래스 */
11290
- .dark .dark\:background-color\:base-9,
11291
- .dark .dark\:bg\:base-9 {
11292
- background-color: var(--color-base-9) !important;
11293
- }
11294
- .dark .dark\:color\:base-1,
11295
- .dark .dark\:tc\:base-1 {
11296
- color: var(--color-base-1) !important;
11297
- }
11298
- .dark .dark\:border-color\:base-7,
11299
- .dark .dark\:bd-c\:base-7 {
11300
- border-color: var(--color-base-7) !important;
11301
- }
11302
- /* ===== TRANSFORMS UTILITIES ===== */
11303
- /* CSS 속성명과 값을 그대로 유지하는 NewTil CSS 철학 */
11304
- /* Transform 속성들: translate, rotate, scale, skew 등 */
11305
- /* ===== TRANSFORM SCALE ===== */
11306
- /* transform: scale() */
11307
- .transform\:scale\(0\),
11308
- .scale\:0 {
11309
- transform: scale(0) !important;
11310
- }
11311
- .transform\:scale\(0\.5\),
11312
- .scale\:50 {
11313
- transform: scale(0.5) !important;
11314
- }
11315
- .transform\:scale\(0\.75\),
11316
- .scale\:75 {
11317
- transform: scale(0.75) !important;
11318
- }
11319
- .transform\:scale\(0\.9\),
11320
- .scale\:90 {
11321
- transform: scale(0.9) !important;
11322
- }
11323
- .transform\:scale\(0\.95\),
11324
- .scale\:95 {
11325
- transform: scale(0.95) !important;
11326
- }
11327
- .transform\:scale\(1\),
11328
- .scale\:100 {
11329
- transform: scale(1) !important;
11330
- }
11331
- .transform\:scale\(1\.05\),
11332
- .scale\:105 {
11333
- transform: scale(1.05) !important;
11334
- }
11335
- .transform\:scale\(1\.1\),
11336
- .scale\:110 {
11337
- transform: scale(1.1) !important;
11338
- }
11339
- .transform\:scale\(1\.25\),
11340
- .scale\:125 {
11341
- transform: scale(1.25) !important;
11342
- }
11343
- .transform\:scale\(1\.5\),
11344
- .scale\:150 {
11345
- transform: scale(1.5) !important;
11346
- }
11347
- .transform\:scale\(2\),
11348
- .scale\:200 {
11349
- transform: scale(2) !important;
11350
- }
11351
- /* transform: scaleX() */
11352
- .transform\:scaleX\(0\),
11353
- .scale-x\:0 {
11354
- transform: scaleX(0) !important;
11355
- }
11356
- .transform\:scaleX\(0\.5\),
11357
- .scale-x\:50 {
11358
- transform: scaleX(0.5) !important;
11359
- }
11360
- .transform\:scaleX\(1\),
11361
- .scale-x\:100 {
11362
- transform: scaleX(1) !important;
11363
- }
11364
- .transform\:scaleX\(1\.5\),
11365
- .scale-x\:150 {
11366
- transform: scaleX(1.5) !important;
11367
- }
11368
- .transform\:scaleX\(-1\),
11369
- .scale-x\:-100 {
11370
- transform: scaleX(-1) !important;
11371
- }
11372
- /* transform: scaleY() */
11373
- .transform\:scaleY\(0\),
11374
- .scale-y\:0 {
11375
- transform: scaleY(0) !important;
11376
- }
11377
- .transform\:scaleY\(0\.5\),
11378
- .scale-y\:50 {
11379
- transform: scaleY(0.5) !important;
11380
- }
11381
- .transform\:scaleY\(1\),
11382
- .scale-y\:100 {
11383
- transform: scaleY(1) !important;
11384
- }
11385
- .transform\:scaleY\(1\.5\),
11386
- .scale-y\:150 {
11387
- transform: scaleY(1.5) !important;
11388
- }
11389
- .transform\:scaleY\(-1\),
11390
- .scale-y\:-100 {
11391
- transform: scaleY(-1) !important;
11392
- }
11393
- /* ===== TRANSFORM ROTATE ===== */
11394
- /* transform: rotate() */
11395
- .transform\:rotate\(0deg\),
11396
- .rotate\:0 {
11397
- transform: rotate(0deg) !important;
11398
- }
11399
- .transform\:rotate\(1deg\),
11400
- .rotate\:1 {
11401
- transform: rotate(1deg) !important;
11402
- }
11403
- .transform\:rotate\(2deg\),
11404
- .rotate\:2 {
11405
- transform: rotate(2deg) !important;
11406
- }
11407
- .transform\:rotate\(3deg\),
11408
- .rotate\:3 {
11409
- transform: rotate(3deg) !important;
11410
- }
11411
- .transform\:rotate\(6deg\),
11412
- .rotate\:6 {
11413
- transform: rotate(6deg) !important;
11414
- }
11415
- .transform\:rotate\(12deg\),
11416
- .rotate\:12 {
11417
- transform: rotate(12deg) !important;
11418
- }
11419
- .transform\:rotate\(45deg\),
11420
- .rotate\:45 {
11421
- transform: rotate(45deg) !important;
11422
- }
11423
- .transform\:rotate\(90deg\),
11424
- .rotate\:90 {
11425
- transform: rotate(90deg) !important;
11426
- }
11427
- .transform\:rotate\(180deg\),
11428
- .rotate\:180 {
11429
- transform: rotate(180deg) !important;
11430
- }
11431
- .transform\:rotate\(-1deg\),
11432
- .rotate\:-1 {
11433
- transform: rotate(-1deg) !important;
11434
- }
11435
- .transform\:rotate\(-2deg\),
11436
- .rotate\:-2 {
11437
- transform: rotate(-2deg) !important;
11438
- }
11439
- .transform\:rotate\(-3deg\),
11440
- .rotate\:-3 {
11441
- transform: rotate(-3deg) !important;
11442
- }
11443
- .transform\:rotate\(-6deg\),
11444
- .rotate\:-6 {
11445
- transform: rotate(-6deg) !important;
11446
- }
11447
- .transform\:rotate\(-12deg\),
11448
- .rotate\:-12 {
11449
- transform: rotate(-12deg) !important;
11450
- }
11451
- .transform\:rotate\(-45deg\),
11452
- .rotate\:-45 {
11453
- transform: rotate(-45deg) !important;
11454
- }
11455
- .transform\:rotate\(-90deg\),
11456
- .rotate\:-90 {
11457
- transform: rotate(-90deg) !important;
11458
- }
11459
- .transform\:rotate\(-180deg\),
11460
- .rotate\:-180 {
11461
- transform: rotate(-180deg) !important;
11462
- }
11463
- /* ===== TRANSFORM TRANSLATE ===== */
11464
- /* transform: translateX() */
11465
- .transform\:translateX\(0px\),
11466
- .translate-x\:0 {
11467
- transform: translateX(0px) !important;
11468
- }
11469
- .transform\:translateX\(1px\),
11470
- .translate-x\:px {
11471
- transform: translateX(1px) !important;
11472
- }
11473
- .transform\:translateX\(0\.125rem\),
11474
- .translate-x\:0_5 {
11475
- transform: translateX(var(--space-0_5)) !important;
11476
- }
11477
- .transform\:translateX\(0\.25rem\),
11478
- .translate-x\:1 {
11479
- transform: translateX(var(--space-1)) !important;
11480
- }
11481
- .transform\:translateX\(0\.5rem\),
11482
- .translate-x\:2 {
11483
- transform: translateX(var(--space-2)) !important;
11484
- }
11485
- .transform\:translateX\(0\.75rem\),
11486
- .translate-x\:3 {
11487
- transform: translateX(var(--space-3)) !important;
11488
- }
11489
- .transform\:translateX\(1rem\),
11490
- .translate-x\:4 {
11491
- transform: translateX(var(--space-4)) !important;
11492
- }
11493
- .transform\:translateX\(1\.25rem\),
11494
- .translate-x\:5 {
11495
- transform: translateX(var(--space-5)) !important;
11496
- }
11497
- .transform\:translateX\(1\.5rem\),
11498
- .translate-x\:6 {
11499
- transform: translateX(var(--space-6)) !important;
11500
- }
11501
- .transform\:translateX\(2rem\),
11502
- .translate-x\:8 {
11503
- transform: translateX(var(--space-8)) !important;
11504
- }
11505
- .transform\:translateX\(2\.5rem\),
11506
- .translate-x\:10 {
11507
- transform: translateX(var(--space-10)) !important;
11508
- }
11509
- .transform\:translateX\(3rem\),
11510
- .translate-x\:12 {
11511
- transform: translateX(var(--space-12)) !important;
11512
- }
11513
- .transform\:translateX\(50%\),
11514
- .translate-x\:1\/2 {
11515
- transform: translateX(50%) !important;
11516
- }
11517
- .transform\:translateX\(100%\),
11518
- .translate-x\:full {
11519
- transform: translateX(100%) !important;
11520
- }
11521
- /* 음수 translateX */
11522
- .transform\:translateX\(-1px\),
11523
- .translate-x\:-px {
11524
- transform: translateX(-1px) !important;
11525
- }
11526
- .transform\:translateX\(-0\.125rem\),
11527
- .translate-x\:-0_5 {
11528
- transform: translateX(calc(var(--space-0_5) * -1)) !important;
11529
- }
11530
- .transform\:translateX\(-0\.25rem\),
11531
- .translate-x\:-1 {
11532
- transform: translateX(calc(var(--space-1) * -1)) !important;
11533
- }
11534
- .transform\:translateX\(-0\.5rem\),
11535
- .translate-x\:-2 {
11536
- transform: translateX(calc(var(--space-2) * -1)) !important;
11537
- }
11538
- .transform\:translateX\(-0\.75rem\),
11539
- .translate-x\:-3 {
11540
- transform: translateX(calc(var(--space-3) * -1)) !important;
11541
- }
11542
- .transform\:translateX\(-1rem\),
11543
- .translate-x\:-4 {
11544
- transform: translateX(calc(var(--space-4) * -1)) !important;
11545
- }
11546
- .transform\:translateX\(-1\.25rem\),
11547
- .translate-x\:-5 {
11548
- transform: translateX(calc(var(--space-5) * -1)) !important;
11549
- }
11550
- .transform\:translateX\(-1\.5rem\),
11551
- .translate-x\:-6 {
11552
- transform: translateX(calc(var(--space-6) * -1)) !important;
11553
- }
11554
- .transform\:translateX\(-2rem\),
11555
- .translate-x\:-8 {
11556
- transform: translateX(calc(var(--space-8) * -1)) !important;
11557
- }
11558
- .transform\:translateX\(-2\.5rem\),
11559
- .translate-x\:-10 {
11560
- transform: translateX(calc(var(--space-10) * -1)) !important;
11561
- }
11562
- .transform\:translateX\(-3rem\),
11563
- .translate-x\:-12 {
11564
- transform: translateX(calc(var(--space-12) * -1)) !important;
11565
- }
11566
- .transform\:translateX\(-50%\),
11567
- .translate-x\:-1\/2 {
11568
- transform: translateX(-50%) !important;
11569
- }
11570
- .transform\:translateX\(-100%\),
11571
- .translate-x\:-full {
11572
- transform: translateX(-100%) !important;
11573
- }
11574
- /* transform: translateY() */
11575
- .transform\:translateY\(0px\),
11576
- .translate-y\:0 {
11577
- transform: translateY(0px) !important;
11578
- }
11579
- .transform\:translateY\(1px\),
11580
- .translate-y\:px {
11581
- transform: translateY(1px) !important;
11582
- }
11583
- .transform\:translateY\(0\.125rem\),
11584
- .translate-y\:0_5 {
11585
- transform: translateY(var(--space-0_5)) !important;
11586
- }
11587
- .transform\:translateY\(0\.25rem\),
11588
- .translate-y\:1 {
11589
- transform: translateY(var(--space-1)) !important;
11590
- }
11591
- .transform\:translateY\(0\.5rem\),
11592
- .translate-y\:2 {
11593
- transform: translateY(var(--space-2)) !important;
11594
- }
11595
- .transform\:translateY\(0\.75rem\),
11596
- .translate-y\:3 {
11597
- transform: translateY(var(--space-3)) !important;
11598
- }
11599
- .transform\:translateY\(1rem\),
11600
- .translate-y\:4 {
11601
- transform: translateY(var(--space-4)) !important;
11602
- }
11603
- .transform\:translateY\(1\.25rem\),
11604
- .translate-y\:5 {
11605
- transform: translateY(var(--space-5)) !important;
11606
- }
11607
- .transform\:translateY\(1\.5rem\),
11608
- .translate-y\:6 {
11609
- transform: translateY(var(--space-6)) !important;
11610
- }
11611
- .transform\:translateY\(2rem\),
11612
- .translate-y\:8 {
11613
- transform: translateY(var(--space-8)) !important;
11614
- }
11615
- .transform\:translateY\(2\.5rem\),
11616
- .translate-y\:10 {
11617
- transform: translateY(var(--space-10)) !important;
11618
- }
11619
- .transform\:translateY\(3rem\),
11620
- .translate-y\:12 {
11621
- transform: translateY(var(--space-12)) !important;
11622
- }
11623
- .transform\:translateY\(50%\),
11624
- .translate-y\:1\/2 {
11625
- transform: translateY(50%) !important;
11626
- }
11627
- .transform\:translateY\(100%\),
11628
- .translate-y\:full {
11629
- transform: translateY(100%) !important;
11630
- }
11631
- /* 음수 translateY */
11632
- .transform\:translateY\(-1px\),
11633
- .translate-y\:-px {
11634
- transform: translateY(-1px) !important;
11635
- }
11636
- .transform\:translateY\(-0\.125rem\),
11637
- .translate-y\:-0_5 {
11638
- transform: translateY(calc(var(--space-0_5) * -1)) !important;
11639
- }
11640
- .transform\:translateY\(-0\.25rem\),
11641
- .translate-y\:-1 {
11642
- transform: translateY(calc(var(--space-1) * -1)) !important;
11643
- }
11644
- .transform\:translateY\(-0\.5rem\),
11645
- .translate-y\:-2 {
11646
- transform: translateY(calc(var(--space-2) * -1)) !important;
11647
- }
11648
- .transform\:translateY\(-0\.75rem\),
11649
- .translate-y\:-3 {
11650
- transform: translateY(calc(var(--space-3) * -1)) !important;
11651
- }
11652
- .transform\:translateY\(-1rem\),
11653
- .translate-y\:-4 {
11654
- transform: translateY(calc(var(--space-4) * -1)) !important;
11655
- }
11656
- .transform\:translateY\(-1\.25rem\),
11657
- .translate-y\:-5 {
11658
- transform: translateY(calc(var(--space-5) * -1)) !important;
11659
- }
11660
- .transform\:translateY\(-1\.5rem\),
11661
- .translate-y\:-6 {
11662
- transform: translateY(calc(var(--space-6) * -1)) !important;
11663
- }
11664
- .transform\:translateY\(-2rem\),
11665
- .translate-y\:-8 {
11666
- transform: translateY(calc(var(--space-8) * -1)) !important;
11667
- }
11668
- .transform\:translateY\(-2\.5rem\),
11669
- .translate-y\:-10 {
11670
- transform: translateY(calc(var(--space-10) * -1)) !important;
11671
- }
11672
- .transform\:translateY\(-3rem\),
11673
- .translate-y\:-12 {
11674
- transform: translateY(calc(var(--space-12) * -1)) !important;
11675
- }
11676
- .transform\:translateY\(-50%\),
11677
- .translate-y\:-1\/2 {
11678
- transform: translateY(-50%) !important;
11679
- }
11680
- .transform\:translateY\(-100%\),
11681
- .translate-y\:-full {
11682
- transform: translateY(-100%) !important;
11683
- }
11684
- /* ===== TRANSFORM SKEW ===== */
11685
- /* transform: skewX() */
11686
- .transform\:skewX\(0deg\),
11687
- .skew-x\:0 {
11688
- transform: skewX(0deg) !important;
11689
- }
11690
- .transform\:skewX\(1deg\),
11691
- .skew-x\:1 {
11692
- transform: skewX(1deg) !important;
11693
- }
11694
- .transform\:skewX\(2deg\),
11695
- .skew-x\:2 {
11696
- transform: skewX(2deg) !important;
11697
- }
11698
- .transform\:skewX\(3deg\),
11699
- .skew-x\:3 {
11700
- transform: skewX(3deg) !important;
11701
- }
11702
- .transform\:skewX\(6deg\),
11703
- .skew-x\:6 {
11704
- transform: skewX(6deg) !important;
11705
- }
11706
- .transform\:skewX\(12deg\),
11707
- .skew-x\:12 {
11708
- transform: skewX(12deg) !important;
11709
- }
11710
- .transform\:skewX\(-1deg\),
11711
- .skew-x\:-1 {
11712
- transform: skewX(-1deg) !important;
11713
- }
11714
- .transform\:skewX\(-2deg\),
11715
- .skew-x\:-2 {
11716
- transform: skewX(-2deg) !important;
11717
- }
11718
- .transform\:skewX\(-3deg\),
11719
- .skew-x\:-3 {
11720
- transform: skewX(-3deg) !important;
11721
- }
11722
- .transform\:skewX\(-6deg\),
11723
- .skew-x\:-6 {
11724
- transform: skewX(-6deg) !important;
11725
- }
11726
- .transform\:skewX\(-12deg\),
11727
- .skew-x\:-12 {
11728
- transform: skewX(-12deg) !important;
11729
- }
11730
- /* transform: skewY() */
11731
- .transform\:skewY\(0deg\),
11732
- .skew-y\:0 {
11733
- transform: skewY(0deg) !important;
11734
- }
11735
- .transform\:skewY\(1deg\),
11736
- .skew-y\:1 {
11737
- transform: skewY(1deg) !important;
11738
- }
11739
- .transform\:skewY\(2deg\),
11740
- .skew-y\:2 {
11741
- transform: skewY(2deg) !important;
11742
- }
11743
- .transform\:skewY\(3deg\),
11744
- .skew-y\:3 {
11745
- transform: skewY(3deg) !important;
11746
- }
11747
- .transform\:skewY\(6deg\),
11748
- .skew-y\:6 {
11749
- transform: skewY(6deg) !important;
11750
- }
11751
- .transform\:skewY\(12deg\),
11752
- .skew-y\:12 {
11753
- transform: skewY(12deg) !important;
11754
- }
11755
- .transform\:skewY\(-1deg\),
11756
- .skew-y\:-1 {
11757
- transform: skewY(-1deg) !important;
11758
- }
11759
- .transform\:skewY\(-2deg\),
11760
- .skew-y\:-2 {
11761
- transform: skewY(-2deg) !important;
11762
- }
11763
- .transform\:skewY\(-3deg\),
11764
- .skew-y\:-3 {
11765
- transform: skewY(-3deg) !important;
11766
- }
11767
- .transform\:skewY\(-6deg\),
11768
- .skew-y\:-6 {
11769
- transform: skewY(-6deg) !important;
11770
- }
11771
- .transform\:skewY\(-12deg\),
11772
- .skew-y\:-12 {
11773
- transform: skewY(-12deg) !important;
11774
- }
11775
- /* ===== TRANSFORM ORIGIN ===== */
11776
- .transform-origin\:center,
11777
- .origin\:center {
11778
- transform-origin: center !important;
11779
- }
11780
- .transform-origin\:top,
11781
- .origin\:top {
11782
- transform-origin: top !important;
11783
- }
11784
- .transform-origin\:top-right,
11785
- .origin\:top-right {
11786
- transform-origin: top right !important;
11787
- }
11788
- .transform-origin\:right,
11789
- .origin\:right {
11790
- transform-origin: right !important;
11791
- }
11792
- .transform-origin\:bottom-right,
11793
- .origin\:bottom-right {
11794
- transform-origin: bottom right !important;
11795
- }
11796
- .transform-origin\:bottom,
11797
- .origin\:bottom {
11798
- transform-origin: bottom !important;
11799
- }
11800
- .transform-origin\:bottom-left,
11801
- .origin\:bottom-left {
11802
- transform-origin: bottom left !important;
11803
- }
11804
- .transform-origin\:left,
11805
- .origin\:left {
11806
- transform-origin: left !important;
11807
- }
11808
- .transform-origin\:top-left,
11809
- .origin\:top-left {
11810
- transform-origin: top left !important;
11811
- }
11812
- /* ===== TRANSFORM RESET ===== */
11813
- .transform\:none {
11814
- transform: none !important;
11815
- }
11816
- /* ===== RESPONSIVE TRANSFORMS ===== */
11817
- /* Small screens (640px+) */
11818
- @media (min-width: 640px) {
11819
- .sm\:scale\:105 {
11820
- transform: scale(1.05) !important;
11821
- }
11822
- .sm\:rotate\:45 {
11823
- transform: rotate(45deg) !important;
11824
- }
11825
- .sm\:translate-x\:4 {
11826
- transform: translateX(var(--space-4)) !important;
11827
- }
11828
- .sm\:translate-y\:-2 {
11829
- transform: translateY(calc(var(--space-2) * -1)) !important;
11830
- }
11831
- }
11832
- /* Medium screens (768px+) */
11833
- @media (min-width: 768px) {
11834
- .md\:scale\:105 {
11835
- transform: scale(1.05) !important;
11836
- }
11837
- .md\:rotate\:45 {
11838
- transform: rotate(45deg) !important;
11839
- }
11840
- .md\:translate-x\:4 {
11841
- transform: translateX(var(--space-4)) !important;
11842
- }
11843
- .md\:translate-y\:-2 {
11844
- transform: translateY(calc(var(--space-2) * -1)) !important;
11845
- }
11846
- }
11847
- /* Large screens (1024px+) */
11848
- @media (min-width: 1024px) {
11849
- .lg\:scale\:105 {
11850
- transform: scale(1.05) !important;
11851
- }
11852
- .lg\:rotate\:45 {
11853
- transform: rotate(45deg) !important;
11854
- }
11855
- .lg\:translate-x\:4 {
11856
- transform: translateX(var(--space-4)) !important;
11857
- }
11858
- .lg\:translate-y\:-2 {
11859
- transform: translateY(calc(var(--space-2) * -1)) !important;
11860
- }
11861
- }
11862
- /* Extra large screens (1280px+) */
11863
- @media (min-width: 1280px) {
11864
- .xl\:scale\:105 {
11865
- transform: scale(1.05) !important;
11866
- }
11867
- .xl\:rotate\:45 {
11868
- transform: rotate(45deg) !important;
11869
- }
11870
- .xl\:translate-x\:4 {
11871
- transform: translateX(var(--space-4)) !important;
11872
- }
11873
- .xl\:translate-y\:-2 {
11874
- transform: translateY(calc(var(--space-2) * -1)) !important;
11875
- }
11876
- }
11877
- /* ===== TRANSITIONS UTILITIES ===== */
11878
- /* CSS 속성명과 값을 그대로 유지하는 NewTil CSS 철학 */
11879
- /* Transition 속성들: transition, transition-property, transition-duration 등 */
11880
- /* ===== TRANSITION PROPERTY ===== */
11881
- /* transition: all */
11882
- .transition\:all {
11883
- transition: all var(--duration-150) ease !important;
11884
- }
11885
- .transition {
11886
- transition: all var(--duration-150) ease !important;
11887
- }
11888
- /* transition: none */
11889
- .transition\:none {
11890
- transition: none !important;
11891
- }
11892
- /* transition: colors */
11893
- .transition\:colors,
11894
- .transition\:color {
11895
- transition: color var(--duration-150) ease,
11896
- background-color var(--duration-150) ease,
11897
- border-color var(--duration-150) ease !important;
11898
- }
11899
- /* transition: opacity */
11900
- .transition\:opacity {
11901
- transition: opacity var(--duration-150) ease !important;
11902
- }
11903
- /* transition: shadow */
11904
- .transition\:shadow,
11905
- .transition\:box-shadow {
11906
- transition: box-shadow var(--duration-150) ease !important;
11907
- }
11908
- /* transition: transform */
11909
- .transition\:transform {
11910
- transition: transform var(--duration-150) ease !important;
11911
- }
11912
- /* ===== TRANSITION DURATION ===== */
11913
- /* transition-duration: 75ms */
11914
- .transition-duration\:75ms,
11915
- .duration\:75 {
11916
- transition-duration: var(--duration-75) !important;
11917
- }
11918
- /* transition-duration: 100ms */
11919
- .transition-duration\:100ms,
11920
- .duration\:100 {
11921
- transition-duration: var(--duration-100) !important;
11922
- }
11923
- /* transition-duration: 150ms */
11924
- .transition-duration\:150ms,
11925
- .duration\:150 {
11926
- transition-duration: var(--duration-150) !important;
11927
- }
11928
- /* transition-duration: 200ms */
11929
- .transition-duration\:200ms,
11930
- .duration\:200 {
11931
- transition-duration: var(--duration-200) !important;
11932
- }
11933
- /* transition-duration: 300ms */
11934
- .transition-duration\:300ms,
11935
- .duration\:300 {
11936
- transition-duration: var(--duration-300) !important;
11937
- }
11938
- /* transition-duration: 500ms */
11939
- .transition-duration\:500ms,
11940
- .duration\:500 {
11941
- transition-duration: var(--duration-500) !important;
11942
- }
11943
- /* transition-duration: 700ms */
11944
- .transition-duration\:700ms,
11945
- .duration\:700 {
11946
- transition-duration: var(--duration-700) !important;
11947
- }
11948
- /* transition-duration: 1000ms */
11949
- .transition-duration\:1000ms,
11950
- .duration\:1000 {
11951
- transition-duration: var(--duration-1000) !important;
11952
- }
11953
- /* ===== TRANSITION TIMING FUNCTION ===== */
11954
- /* transition-timing-function: linear */
11955
- .transition-timing-function\:linear,
11956
- .ease\:linear {
11957
- transition-timing-function: var(--ease-linear) !important;
11958
- }
11959
- /* transition-timing-function: ease */
11960
- .transition-timing-function\:ease,
11961
- .ease\:ease {
11962
- transition-timing-function: ease !important;
11963
- }
11964
- /* transition-timing-function: ease-in */
11965
- .transition-timing-function\:ease-in,
11966
- .ease\:in {
11967
- transition-timing-function: var(--ease-in) !important;
11968
- }
11969
- /* transition-timing-function: ease-out */
11970
- .transition-timing-function\:ease-out,
11971
- .ease\:out {
11972
- transition-timing-function: var(--ease-out) !important;
11973
- }
11974
- /* transition-timing-function: ease-in-out */
11975
- .transition-timing-function\:ease-in-out,
11976
- .ease\:in-out {
11977
- transition-timing-function: var(--ease-in-out) !important;
11978
- }
11979
- /* transition-timing-function: cubic-bezier */
11980
- .transition-timing-function\:cubic-bezier\(0\.4\,0\,0\.6\,1\),
11981
- .ease\:bounce {
11982
- transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1) !important;
11983
- }
11984
- .transition-timing-function\:cubic-bezier\(0\.25\,0\.46\,0\.45\,0\.94\),
11985
- .ease\:smooth {
11986
- transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
11987
- }
11988
- /* ===== TRANSITION DELAY ===== */
11989
- /* transition-delay: 75ms */
11990
- .transition-delay\:75ms,
11991
- .delay\:75 {
11992
- transition-delay: var(--duration-75) !important;
11993
- }
11994
- /* transition-delay: 100ms */
11995
- .transition-delay\:100ms,
11996
- .delay\:100 {
11997
- transition-delay: var(--duration-100) !important;
11998
- }
11999
- /* transition-delay: 150ms */
12000
- .transition-delay\:150ms,
12001
- .delay\:150 {
12002
- transition-delay: var(--duration-150) !important;
12003
- }
12004
- /* transition-delay: 200ms */
12005
- .transition-delay\:200ms,
12006
- .delay\:200 {
12007
- transition-delay: var(--duration-200) !important;
12008
- }
12009
- /* transition-delay: 300ms */
12010
- .transition-delay\:300ms,
12011
- .delay\:300 {
12012
- transition-delay: var(--duration-300) !important;
12013
- }
12014
- /* transition-delay: 500ms */
12015
- .transition-delay\:500ms,
12016
- .delay\:500 {
12017
- transition-delay: var(--duration-500) !important;
12018
- }
12019
- /* transition-delay: 700ms */
12020
- .transition-delay\:700ms,
12021
- .delay\:700 {
12022
- transition-delay: var(--duration-700) !important;
12023
- }
12024
- /* transition-delay: 1000ms */
12025
- .transition-delay\:1000ms,
12026
- .delay\:1000 {
12027
- transition-delay: var(--duration-1000) !important;
12028
- }
12029
- /* ===== COMBINED TRANSITIONS (자주 사용되는 조합) ===== */
12030
- /* 빠른 fade 효과 */
12031
- .transition\:fade-fast {
12032
- transition: opacity var(--duration-100) var(--ease-out) !important;
12033
- }
12034
- /* 중간 fade 효과 */
12035
- .transition\:fade {
12036
- transition: opacity var(--duration-200) var(--ease-out) !important;
12037
- }
12038
- /* 느린 fade 효과 */
12039
- .transition\:fade-slow {
12040
- transition: opacity var(--duration-500) var(--ease-out) !important;
12041
- }
12042
- /* 빠른 scale 효과 */
12043
- .transition\:scale-fast {
12044
- transition: transform var(--duration-100) var(--ease-out) !important;
12045
- }
12046
- /* 중간 scale 효과 */
12047
- .transition\:scale {
12048
- transition: transform var(--duration-200) var(--ease-out) !important;
12049
- }
12050
- /* 느린 scale 효과 */
12051
- .transition\:scale-slow {
12052
- transition: transform var(--duration-500) var(--ease-out) !important;
12053
- }
12054
- /* 빠른 slide 효과 */
12055
- .transition\:slide-fast {
12056
- transition: transform var(--duration-150) var(--ease-out) !important;
12057
- }
12058
- /* 중간 slide 효과 */
12059
- .transition\:slide {
12060
- transition: transform var(--duration-300) var(--ease-out) !important;
12061
- }
12062
- /* 느린 slide 효과 */
12063
- .transition\:slide-slow {
12064
- transition: transform var(--duration-500) var(--ease-out) !important;
12065
- }
12066
- /* 빠른 색상 변화 */
12067
- .transition\:colors-fast {
12068
- transition: color var(--duration-100) var(--ease-out),
12069
- background-color var(--duration-100) var(--ease-out),
12070
- border-color var(--duration-100) var(--ease-out) !important;
12071
- }
12072
- /* 중간 색상 변화 */
12073
- .transition\:colors-normal {
12074
- transition: color var(--duration-200) var(--ease-out),
12075
- background-color var(--duration-200) var(--ease-out),
12076
- border-color var(--duration-200) var(--ease-out) !important;
12077
- }
12078
- /* 느린 색상 변화 */
12079
- .transition\:colors-slow {
12080
- transition: color var(--duration-300) var(--ease-out),
12081
- background-color var(--duration-300) var(--ease-out),
12082
- border-color var(--duration-300) var(--ease-out) !important;
12083
- }
12084
- /* 버튼 호버 효과 */
12085
- .transition\:button {
12086
- transition: all var(--duration-150) var(--ease-out) !important;
12087
- }
12088
- /* 카드 호버 효과 */
12089
- .transition\:card {
12090
- transition: transform var(--duration-200) var(--ease-out),
12091
- box-shadow var(--duration-200) var(--ease-out) !important;
12092
- }
12093
- /* 모달 등장 효과 */
12094
- .transition\:modal {
12095
- transition: opacity var(--duration-300) var(--ease-out),
12096
- transform var(--duration-300) var(--ease-out) !important;
12097
- }
12098
- /* 메뉴 슬라이드 효과 */
12099
- .transition\:menu {
12100
- transition: transform var(--duration-300) var(--ease-in-out) !important;
12101
- }
12102
- /* ===== WILL-CHANGE (성능 최적화) ===== */
12103
- .will-change\:auto {
12104
- will-change: auto !important;
12105
- }
12106
- .will-change\:scroll {
12107
- will-change: scroll-position !important;
12108
- }
12109
- .will-change\:contents {
12110
- will-change: contents !important;
12111
- }
12112
- .will-change\:transform {
12113
- will-change: transform !important;
12114
- }
12115
- .will-change\:opacity {
12116
- will-change: opacity !important;
12117
- }
12118
- .will-change\:filter {
12119
- will-change: filter !important;
12120
- }
12121
- /* ===== ANIMATION FILL MODE ===== */
12122
- .animation-fill-mode\:none,
12123
- .fill\:none {
12124
- animation-fill-mode: none !important;
12125
- }
12126
- .animation-fill-mode\:forwards,
12127
- .fill\:forwards {
12128
- animation-fill-mode: forwards !important;
12129
- }
12130
- .animation-fill-mode\:backwards,
12131
- .fill\:backwards {
12132
- animation-fill-mode: backwards !important;
12133
- }
12134
- .animation-fill-mode\:both,
12135
- .fill\:both {
12136
- animation-fill-mode: both !important;
12137
- }
12138
- /* ===== ANIMATION DIRECTION ===== */
12139
- .animation-direction\:normal,
12140
- .anim-dir\:normal {
12141
- animation-direction: normal !important;
12142
- }
12143
- .animation-direction\:reverse,
12144
- .anim-dir\:reverse {
12145
- animation-direction: reverse !important;
12146
- }
12147
- .animation-direction\:alternate,
12148
- .anim-dir\:alternate {
12149
- animation-direction: alternate !important;
12150
- }
12151
- .animation-direction\:alternate-reverse,
12152
- .anim-dir\:alternate-reverse {
12153
- animation-direction: alternate-reverse !important;
12154
- }
12155
- /* ===== ANIMATION ITERATION COUNT ===== */
12156
- .animation-iteration-count\:1,
12157
- .iterate\:1 {
12158
- animation-iteration-count: 1 !important;
12159
- }
12160
- .animation-iteration-count\:2,
12161
- .iterate\:2 {
12162
- animation-iteration-count: 2 !important;
12163
- }
12164
- .animation-iteration-count\:3,
12165
- .iterate\:3 {
12166
- animation-iteration-count: 3 !important;
12167
- }
12168
- .animation-iteration-count\:infinite,
12169
- .iterate\:infinite {
12170
- animation-iteration-count: infinite !important;
12171
- }
12172
- /* ===== ANIMATION PLAY STATE ===== */
12173
- .animation-play-state\:running,
12174
- .animate\:running {
12175
- animation-play-state: running !important;
12176
- }
12177
- .animation-play-state\:paused,
12178
- .animate\:paused {
12179
- animation-play-state: paused !important;
12180
- }
12181
- /* ===== RESPONSIVE TRANSITIONS ===== */
12182
- /* Small screens (640px+) */
12183
- @media (min-width: 640px) {
12184
- .sm\:transition {
12185
- transition: all var(--duration-150) ease !important;
12186
- }
12187
- .sm\:duration\:200 {
12188
- transition-duration: var(--duration-200) !important;
12189
- }
12190
- .sm\:ease\:out {
12191
- transition-timing-function: var(--ease-out) !important;
12192
- }
12193
- }
12194
- /* Medium screens (768px+) */
12195
- @media (min-width: 768px) {
12196
- .md\:transition {
12197
- transition: all var(--duration-150) ease !important;
12198
- }
12199
- .md\:duration\:200 {
12200
- transition-duration: var(--duration-200) !important;
12201
- }
12202
- .md\:ease\:out {
12203
- transition-timing-function: var(--ease-out) !important;
12204
- }
12205
- }
12206
- /* Large screens (1024px+) */
12207
- @media (min-width: 1024px) {
12208
- .lg\:transition {
12209
- transition: all var(--duration-150) ease !important;
12210
- }
12211
- .lg\:duration\:200 {
12212
- transition-duration: var(--duration-200) !important;
12213
- }
12214
- .lg\:ease\:out {
12215
- transition-timing-function: var(--ease-out) !important;
12216
- }
12217
- }
12218
- /* Extra large screens (1280px+) */
12219
- @media (min-width: 1280px) {
12220
- .xl\:transition {
12221
- transition: all var(--duration-150) ease !important;
12222
- }
12223
- .xl\:duration\:200 {
12224
- transition-duration: var(--duration-200) !important;
12225
- }
12226
- .xl\:ease\:out {
12227
- transition-timing-function: var(--ease-out) !important;
12228
- }
12229
- }
12230
- /* ===== MOTION PREFERENCES ===== */
12231
- @media (prefers-reduced-motion: reduce) {
12232
- .motion-reduce\:transition\:none {
12233
- transition: none !important;
12234
- }
12235
-
12236
- .motion-reduce\:duration\:0 {
12237
- transition-duration: 0ms !important;
12238
- }
12239
- }
12240
- @media (prefers-reduced-motion: no-preference) {
12241
- .motion-safe\:transition {
12242
- transition: all var(--duration-150) ease !important;
12243
- }
12244
- }
12245
- /* ===== ANIMATIONS & 3D TRANSFORMS UTILITIES ===== */
12246
- /* CSS 속성명과 값을 그대로 유지하는 NewTil CSS 철학 */
12247
- /* 키프레임 애니메이션, 3D transforms, perspective 등 */
12248
- /* ===== 3D TRANSFORMS ===== */
12249
- /* perspective */
12250
- .perspective\:none {
12251
- perspective: none !important;
12252
- }
12253
- .perspective\:250 {
12254
- perspective: 250px !important;
12255
- }
12256
- .perspective\:500 {
12257
- perspective: 500px !important;
12258
- }
12259
- .perspective\:750 {
12260
- perspective: 750px !important;
12261
- }
12262
- .perspective\:1000 {
12263
- perspective: 1000px !important;
12264
- }
12265
- .perspective\:1500 {
12266
- perspective: 1500px !important;
12267
- }
12268
- .perspective\:2000 {
12269
- perspective: 2000px !important;
12270
- }
12271
- /* perspective-origin */
12272
- .perspective-origin\:center {
12273
- perspective-origin: center !important;
12274
- }
12275
- .perspective-origin\:top {
12276
- perspective-origin: top !important;
12277
- }
12278
- .perspective-origin\:bottom {
12279
- perspective-origin: bottom !important;
12280
- }
12281
- .perspective-origin\:left {
12282
- perspective-origin: left !important;
12283
- }
12284
- .perspective-origin\:right {
12285
- perspective-origin: right !important;
12286
- }
12287
- /* transform-style */
12288
- .transform-style\:flat {
12289
- transform-style: flat !important;
12290
- }
12291
- .transform-style\:preserve-3d {
12292
- transform-style: preserve-3d !important;
12293
- }
12294
- /* backface-visibility */
12295
- .backface-visibility\:visible {
12296
- backface-visibility: visible !important;
12297
- }
12298
- .backface-visibility\:hidden {
12299
- backface-visibility: hidden !important;
12300
- }
12301
- /* ===== 3D ROTATE ===== */
12302
- /* rotateX */
12303
- .transform\:rotateX\(0deg\),
12304
- .rotate-x\:0 {
12305
- transform: rotateX(0deg) !important;
12306
- }
12307
- .transform\:rotateX\(15deg\),
12308
- .rotate-x\:15 {
12309
- transform: rotateX(15deg) !important;
12310
- }
12311
- .transform\:rotateX\(30deg\),
12312
- .rotate-x\:30 {
12313
- transform: rotateX(30deg) !important;
12314
- }
12315
- .transform\:rotateX\(45deg\),
12316
- .rotate-x\:45 {
12317
- transform: rotateX(45deg) !important;
12318
- }
12319
- .transform\:rotateX\(60deg\),
12320
- .rotate-x\:60 {
12321
- transform: rotateX(60deg) !important;
12322
- }
12323
- .transform\:rotateX\(90deg\),
12324
- .rotate-x\:90 {
12325
- transform: rotateX(90deg) !important;
12326
- }
12327
- .transform\:rotateX\(180deg\),
12328
- .rotate-x\:180 {
12329
- transform: rotateX(180deg) !important;
12330
- }
12331
- .transform\:rotateX\(-15deg\),
12332
- .rotate-x\:-15 {
12333
- transform: rotateX(-15deg) !important;
12334
- }
12335
- .transform\:rotateX\(-30deg\),
12336
- .rotate-x\:-30 {
12337
- transform: rotateX(-30deg) !important;
12338
- }
12339
- .transform\:rotateX\(-45deg\),
12340
- .rotate-x\:-45 {
12341
- transform: rotateX(-45deg) !important;
12342
- }
12343
- .transform\:rotateX\(-60deg\),
12344
- .rotate-x\:-60 {
12345
- transform: rotateX(-60deg) !important;
12346
- }
12347
- .transform\:rotateX\(-90deg\),
12348
- .rotate-x\:-90 {
12349
- transform: rotateX(-90deg) !important;
12350
- }
12351
- .transform\:rotateX\(-180deg\),
12352
- .rotate-x\:-180 {
12353
- transform: rotateX(-180deg) !important;
12354
- }
12355
- /* rotateY */
12356
- .transform\:rotateY\(0deg\),
12357
- .rotate-y\:0 {
12358
- transform: rotateY(0deg) !important;
12359
- }
12360
- .transform\:rotateY\(15deg\),
12361
- .rotate-y\:15 {
12362
- transform: rotateY(15deg) !important;
12363
- }
12364
- .transform\:rotateY\(30deg\),
12365
- .rotate-y\:30 {
12366
- transform: rotateY(30deg) !important;
12367
- }
12368
- .transform\:rotateY\(45deg\),
12369
- .rotate-y\:45 {
12370
- transform: rotateY(45deg) !important;
12371
- }
12372
- .transform\:rotateY\(60deg\),
12373
- .rotate-y\:60 {
12374
- transform: rotateY(60deg) !important;
12375
- }
12376
- .transform\:rotateY\(90deg\),
12377
- .rotate-y\:90 {
12378
- transform: rotateY(90deg) !important;
12379
- }
12380
- .transform\:rotateY\(180deg\),
12381
- .rotate-y\:180 {
12382
- transform: rotateY(180deg) !important;
12383
- }
12384
- .transform\:rotateY\(-15deg\),
12385
- .rotate-y\:-15 {
12386
- transform: rotateY(-15deg) !important;
12387
- }
12388
- .transform\:rotateY\(-30deg\),
12389
- .rotate-y\:-30 {
12390
- transform: rotateY(-30deg) !important;
12391
- }
12392
- .transform\:rotateY\(-45deg\),
12393
- .rotate-y\:-45 {
12394
- transform: rotateY(-45deg) !important;
12395
- }
12396
- .transform\:rotateY\(-60deg\),
12397
- .rotate-y\:-60 {
12398
- transform: rotateY(-60deg) !important;
12399
- }
12400
- .transform\:rotateY\(-90deg\),
12401
- .rotate-y\:-90 {
12402
- transform: rotateY(-90deg) !important;
12403
- }
12404
- .transform\:rotateY\(-180deg\),
12405
- .rotate-y\:-180 {
12406
- transform: rotateY(-180deg) !important;
12407
- }
12408
- /* rotateZ */
12409
- .transform\:rotateZ\(0deg\),
12410
- .rotate-z\:0 {
12411
- transform: rotateZ(0deg) !important;
12412
- }
12413
- .transform\:rotateZ\(15deg\),
12414
- .rotate-z\:15 {
12415
- transform: rotateZ(15deg) !important;
12416
- }
12417
- .transform\:rotateZ\(30deg\),
12418
- .rotate-z\:30 {
12419
- transform: rotateZ(30deg) !important;
12420
- }
12421
- .transform\:rotateZ\(45deg\),
12422
- .rotate-z\:45 {
12423
- transform: rotateZ(45deg) !important;
12424
- }
12425
- .transform\:rotateZ\(90deg\),
12426
- .rotate-z\:90 {
12427
- transform: rotateZ(90deg) !important;
12428
- }
12429
- .transform\:rotateZ\(180deg\),
12430
- .rotate-z\:180 {
12431
- transform: rotateZ(180deg) !important;
12432
- }
12433
- .transform\:rotateZ\(-15deg\),
12434
- .rotate-z\:-15 {
12435
- transform: rotateZ(-15deg) !important;
12436
- }
12437
- .transform\:rotateZ\(-30deg\),
12438
- .rotate-z\:-30 {
12439
- transform: rotateZ(-30deg) !important;
12440
- }
12441
- .transform\:rotateZ\(-45deg\),
12442
- .rotate-z\:-45 {
12443
- transform: rotateZ(-45deg) !important;
12444
- }
12445
- .transform\:rotateZ\(-90deg\),
12446
- .rotate-z\:-90 {
12447
- transform: rotateZ(-90deg) !important;
12448
- }
12449
- .transform\:rotateZ\(-180deg\),
12450
- .rotate-z\:-180 {
12451
- transform: rotateZ(-180deg) !important;
12452
- }
12453
- /* ===== 3D TRANSLATE ===== */
12454
- /* translateZ */
12455
- .transform\:translateZ\(0px\),
12456
- .translate-z\:0 {
12457
- transform: translateZ(0px) !important;
12458
- }
12459
- .transform\:translateZ\(1px\),
12460
- .translate-z\:px {
12461
- transform: translateZ(1px) !important;
12462
- }
12463
- .transform\:translateZ\(4px\),
12464
- .translate-z\:1 {
12465
- transform: translateZ(4px) !important;
12466
- }
12467
- .transform\:translateZ\(8px\),
12468
- .translate-z\:2 {
12469
- transform: translateZ(8px) !important;
12470
- }
12471
- .transform\:translateZ\(12px\),
12472
- .translate-z\:3 {
12473
- transform: translateZ(12px) !important;
12474
- }
12475
- .transform\:translateZ\(16px\),
12476
- .translate-z\:4 {
12477
- transform: translateZ(16px) !important;
12478
- }
12479
- .transform\:translateZ\(20px\),
12480
- .translate-z\:5 {
12481
- transform: translateZ(20px) !important;
12482
- }
12483
- .transform\:translateZ\(24px\),
12484
- .translate-z\:6 {
12485
- transform: translateZ(24px) !important;
12486
- }
12487
- .transform\:translateZ\(32px\),
12488
- .translate-z\:8 {
12489
- transform: translateZ(32px) !important;
12490
- }
12491
- .transform\:translateZ\(40px\),
12492
- .translate-z\:10 {
12493
- transform: translateZ(40px) !important;
12494
- }
12495
- .transform\:translateZ\(48px\),
12496
- .translate-z\:12 {
12497
- transform: translateZ(48px) !important;
12498
- }
12499
- /* 음수 translateZ */
12500
- .transform\:translateZ\(-1px\),
12501
- .translate-z\:-px {
12502
- transform: translateZ(-1px) !important;
12503
- }
12504
- .transform\:translateZ\(-4px\),
12505
- .translate-z\:-1 {
12506
- transform: translateZ(-4px) !important;
12507
- }
12508
- .transform\:translateZ\(-8px\),
12509
- .translate-z\:-2 {
12510
- transform: translateZ(-8px) !important;
12511
- }
12512
- .transform\:translateZ\(-12px\),
12513
- .translate-z\:-3 {
12514
- transform: translateZ(-12px) !important;
12515
- }
12516
- .transform\:translateZ\(-16px\),
12517
- .translate-z\:-4 {
12518
- transform: translateZ(-16px) !important;
12519
- }
12520
- .transform\:translateZ\(-20px\),
12521
- .translate-z\:-5 {
12522
- transform: translateZ(-20px) !important;
12523
- }
12524
- .transform\:translateZ\(-24px\),
12525
- .translate-z\:-6 {
12526
- transform: translateZ(-24px) !important;
12527
- }
12528
- .transform\:translateZ\(-32px\),
12529
- .translate-z\:-8 {
12530
- transform: translateZ(-32px) !important;
12531
- }
12532
- .transform\:translateZ\(-40px\),
12533
- .translate-z\:-10 {
12534
- transform: translateZ(-40px) !important;
12535
- }
12536
- .transform\:translateZ\(-48px\),
12537
- .translate-z\:-12 {
12538
- transform: translateZ(-48px) !important;
12539
- }
12540
- /* ===== 3D SCALE ===== */
12541
- /* scaleZ */
12542
- .transform\:scaleZ\(0\),
12543
- .scale-z\:0 {
12544
- transform: scaleZ(0) !important;
12545
- }
12546
- .transform\:scaleZ\(0\.5\),
12547
- .scale-z\:50 {
12548
- transform: scaleZ(0.5) !important;
12549
- }
12550
- .transform\:scaleZ\(0\.75\),
12551
- .scale-z\:75 {
12552
- transform: scaleZ(0.75) !important;
12553
- }
12554
- .transform\:scaleZ\(1\),
12555
- .scale-z\:100 {
12556
- transform: scaleZ(1) !important;
12557
- }
12558
- .transform\:scaleZ\(1\.25\),
12559
- .scale-z\:125 {
12560
- transform: scaleZ(1.25) !important;
12561
- }
12562
- .transform\:scaleZ\(1\.5\),
12563
- .scale-z\:150 {
12564
- transform: scaleZ(1.5) !important;
12565
- }
12566
- .transform\:scaleZ\(2\),
12567
- .scale-z\:200 {
12568
- transform: scaleZ(2) !important;
12569
- }
12570
- /* ===== 키프레임 애니메이션 정의 ===== */
12571
- /* Spin 애니메이션 */
12572
- @keyframes spin {
12573
- from {
12574
- transform: rotate(0deg);
12575
- }
12576
- to {
12577
- transform: rotate(360deg);
12578
- }
12579
- }
12580
- /* Ping 애니메이션 */
12581
- @keyframes ping {
12582
- 75%,
12583
- 100% {
12584
- transform: scale(2);
12585
- opacity: 0;
12586
- }
12587
- }
12588
- /* Pulse 애니메이션 */
12589
- @keyframes pulse {
12590
- 0%,
12591
- 100% {
12592
- opacity: 1;
12593
- }
12594
- 50% {
12595
- opacity: 0.5;
12596
- }
12597
- }
12598
- /* Bounce 애니메이션 */
12599
- @keyframes bounce {
12600
- 0%,
12601
- 100% {
12602
- transform: translateY(-25%);
12603
- animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
12604
- }
12605
- 50% {
12606
- transform: translateY(0);
12607
- animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
12608
- }
12609
- }
12610
- /* Shake 애니메이션 */
12611
- @keyframes shake {
12612
- 0%,
12613
- 100% {
12614
- transform: translateX(0);
12615
- }
12616
- 10%,
12617
- 30%,
12618
- 50%,
12619
- 70%,
12620
- 90% {
12621
- transform: translateX(-10px);
12622
- }
12623
- 20%,
12624
- 40%,
12625
- 60%,
12626
- 80% {
12627
- transform: translateX(10px);
12628
- }
12629
- }
12630
- /* Swing 애니메이션 */
12631
- @keyframes swing {
12632
- 20% {
12633
- transform: rotate(15deg);
12634
- }
12635
- 40% {
12636
- transform: rotate(-10deg);
12637
- }
12638
- 60% {
12639
- transform: rotate(5deg);
12640
- }
12641
- 80% {
12642
- transform: rotate(-5deg);
12643
- }
12644
- 100% {
12645
- transform: rotate(0deg);
12646
- }
12647
- }
12648
- /* Tada 애니메이션 */
12649
- @keyframes tada {
12650
- 0% {
12651
- transform: scale(1);
12652
- }
12653
- 10%,
12654
- 20% {
12655
- transform: scale(0.9) rotate(-3deg);
12656
- }
12657
- 30%,
12658
- 50%,
12659
- 70%,
12660
- 90% {
12661
- transform: scale(1.1) rotate(3deg);
12662
- }
12663
- 40%,
12664
- 60%,
12665
- 80% {
12666
- transform: scale(1.1) rotate(-3deg);
12667
- }
12668
- 100% {
12669
- transform: scale(1) rotate(0);
12670
- }
12671
- }
12672
- /* Wobble 애니메이션 */
12673
- @keyframes wobble {
12674
- 0% {
12675
- transform: translateX(0%);
12676
- }
12677
- 15% {
12678
- transform: translateX(-25%) rotate(-5deg);
12679
- }
12680
- 30% {
12681
- transform: translateX(20%) rotate(3deg);
12682
- }
12683
- 45% {
12684
- transform: translateX(-15%) rotate(-3deg);
12685
- }
12686
- 60% {
12687
- transform: translateX(10%) rotate(2deg);
12688
- }
12689
- 75% {
12690
- transform: translateX(-5%) rotate(-1deg);
12691
- }
12692
- 100% {
12693
- transform: translateX(0%);
12694
- }
12695
- }
12696
- /* Jello 애니메이션 */
12697
- @keyframes jello {
12698
- 0%,
12699
- 100% {
12700
- transform: skewX(0deg) skewY(0deg);
12701
- }
12702
- 30% {
12703
- transform: skewX(-12.5deg) skewY(-12.5deg);
12704
- }
12705
- 40% {
12706
- transform: skewX(6.25deg) skewY(6.25deg);
12707
- }
12708
- 50% {
12709
- transform: skewX(-3.125deg) skewY(-3.125deg);
12710
- }
12711
- 65% {
12712
- transform: skewX(1.5625deg) skewY(1.5625deg);
12713
- }
12714
- 75% {
12715
- transform: skewX(-0.78125deg) skewY(-0.78125deg);
12716
- }
12717
- }
12718
- /* Fade In 애니메이션 */
12719
- @keyframes fadeIn {
12720
- from {
12721
- opacity: 0;
12722
- }
12723
- to {
12724
- opacity: 1;
12725
- }
12726
- }
12727
- /* Fade Out 애니메이션 */
12728
- @keyframes fadeOut {
12729
- from {
12730
- opacity: 1;
12731
- }
12732
- to {
12733
- opacity: 0;
12734
- }
12735
- }
12736
- /* Slide In Down 애니메이션 */
12737
- @keyframes slideInDown {
12738
- from {
12739
- transform: translateY(-100%);
12740
- opacity: 0;
12741
- }
12742
- to {
12743
- transform: translateY(0);
12744
- opacity: 1;
12745
- }
12746
- }
12747
- /* Slide In Up 애니메이션 */
12748
- @keyframes slideInUp {
12749
- from {
12750
- transform: translateY(100%);
12751
- opacity: 0;
12752
- }
12753
- to {
12754
- transform: translateY(0);
12755
- opacity: 1;
12756
- }
12757
- }
12758
- /* Slide In Left 애니메이션 */
12759
- @keyframes slideInLeft {
12760
- from {
12761
- transform: translateX(-100%);
12762
- opacity: 0;
12763
- }
12764
- to {
12765
- transform: translateX(0);
12766
- opacity: 1;
12767
- }
12768
- }
12769
- /* Slide In Right 애니메이션 */
12770
- @keyframes slideInRight {
12771
- from {
12772
- transform: translateX(100%);
12773
- opacity: 0;
12774
- }
12775
- to {
12776
- transform: translateX(0);
12777
- opacity: 1;
12778
- }
12779
- }
12780
- /* Zoom In 애니메이션 */
12781
- @keyframes zoomIn {
12782
- from {
12783
- transform: scale(0.3);
12784
- opacity: 0;
12785
- }
12786
- to {
12787
- transform: scale(1);
12788
- opacity: 1;
12789
- }
12790
- }
12791
- /* Zoom Out 애니메이션 */
12792
- @keyframes zoomOut {
12793
- from {
12794
- transform: scale(1);
12795
- opacity: 1;
12796
- }
12797
- to {
12798
- transform: scale(0.3);
12799
- opacity: 0;
12800
- }
12801
- }
12802
- /* Flip In X 애니메이션 */
12803
- @keyframes flipInX {
12804
- from {
12805
- transform: perspective(400px) rotateX(90deg);
12806
- opacity: 0;
12807
- }
12808
- 40% {
12809
- transform: perspective(400px) rotateX(-20deg);
12810
- }
12811
- 60% {
12812
- transform: perspective(400px) rotateX(10deg);
12813
- opacity: 1;
12814
- }
12815
- 80% {
12816
- transform: perspective(400px) rotateX(-5deg);
12817
- }
12818
- to {
12819
- transform: perspective(400px) rotateX(0deg);
12820
- opacity: 1;
12821
- }
12822
- }
12823
- /* Flip In Y 애니메이션 */
12824
- @keyframes flipInY {
12825
- from {
12826
- transform: perspective(400px) rotateY(90deg);
12827
- opacity: 0;
12828
- }
12829
- 40% {
12830
- transform: perspective(400px) rotateY(-20deg);
12831
- }
12832
- 60% {
12833
- transform: perspective(400px) rotateY(10deg);
12834
- opacity: 1;
12835
- }
12836
- 80% {
12837
- transform: perspective(400px) rotateY(-5deg);
12838
- }
12839
- to {
12840
- transform: perspective(400px) rotateY(0deg);
12841
- opacity: 1;
12842
- }
12843
- }
12844
- /* ===== 애니메이션 유틸리티 클래스 ===== */
12845
- /* Spin 애니메이션 */
12846
- .animate\:spin {
12847
- animation: spin 1s linear infinite !important;
12848
- }
12849
- .animate\:spin-slow {
12850
- animation: spin 3s linear infinite !important;
12851
- }
12852
- .animate\:spin-fast {
12853
- animation: spin 0.5s linear infinite !important;
12854
- }
12855
- /* Ping 애니메이션 */
12856
- .animate\:ping {
12857
- animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite !important;
12858
- }
12859
- /* Pulse 애니메이션 */
12860
- .animate\:pulse {
12861
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
12862
- }
12863
- .animate\:pulse-fast {
12864
- animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
12865
- }
12866
- .animate\:pulse-slow {
12867
- animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
12868
- }
12869
- /* Bounce 애니메이션 */
12870
- .animate\:bounce {
12871
- animation: bounce 1s infinite !important;
12872
- }
12873
- .animate\:bounce-slow {
12874
- animation: bounce 2s infinite !important;
12875
- }
12876
- .animate\:bounce-fast {
12877
- animation: bounce 0.5s infinite !important;
12878
- }
12879
- /* Shake 애니메이션 */
12880
- .animate\:shake {
12881
- animation: shake 0.5s ease-in-out !important;
12882
- }
12883
- /* Swing 애니메이션 */
12884
- .animate\:swing {
12885
- animation: swing 1s ease-in-out !important;
12886
- }
12887
- /* Tada 애니메이션 */
12888
- .animate\:tada {
12889
- animation: tada 1s ease-in-out !important;
12890
- }
12891
- /* Wobble 애니메이션 */
12892
- .animate\:wobble {
12893
- animation: wobble 1s ease-in-out !important;
12894
- }
12895
- /* Jello 애니메이션 */
12896
- .animate\:jello {
12897
- animation: jello 1s ease-in-out !important;
12898
- }
12899
- /* Fade 애니메이션 */
12900
- .animate\:fade-in {
12901
- animation: fadeIn 0.5s ease-out !important;
12902
- }
12903
- .animate\:fade-out {
12904
- animation: fadeOut 0.5s ease-out !important;
12905
- }
12906
- /* Slide 애니메이션 */
12907
- .animate\:slide-in-down {
12908
- animation: slideInDown 0.5s ease-out !important;
12909
- }
12910
- .animate\:slide-in-up {
12911
- animation: slideInUp 0.5s ease-out !important;
12912
- }
12913
- .animate\:slide-in-left {
12914
- animation: slideInLeft 0.5s ease-out !important;
12915
- }
12916
- .animate\:slide-in-right {
12917
- animation: slideInRight 0.5s ease-out !important;
12918
- }
12919
- /* Zoom 애니메이션 */
12920
- .animate\:zoom-in {
12921
- animation: zoomIn 0.5s ease-out !important;
12922
- }
12923
- .animate\:zoom-out {
12924
- animation: zoomOut 0.5s ease-out !important;
12925
- }
12926
- /* Flip 애니메이션 */
12927
- .animate\:flip-in-x {
12928
- animation: flipInX 0.75s ease-out !important;
12929
- }
12930
- .animate\:flip-in-y {
12931
- animation: flipInY 0.75s ease-out !important;
12932
- }
12933
- /* 애니메이션 없음 */
12934
- .animate\:none {
12935
- animation: none !important;
12936
- }
12937
- /* ===== RESPONSIVE ANIMATIONS ===== */
12938
- /* Small screens (640px+) */
12939
- @media (min-width: 640px) {
12940
- .sm\:animate\:spin {
12941
- animation: spin 1s linear infinite !important;
12942
- }
12943
- .sm\:animate\:bounce {
12944
- animation: bounce 1s infinite !important;
12945
- }
12946
- .sm\:animate\:pulse {
12947
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
12948
- }
12949
- }
12950
- /* Medium screens (768px+) */
12951
- @media (min-width: 768px) {
12952
- .md\:animate\:spin {
12953
- animation: spin 1s linear infinite !important;
12954
- }
12955
- .md\:animate\:bounce {
12956
- animation: bounce 1s infinite !important;
12957
- }
12958
- .md\:animate\:pulse {
12959
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
12960
- }
12961
- }
12962
- /* Large screens (1024px+) */
12963
- @media (min-width: 1024px) {
12964
- .lg\:animate\:spin {
12965
- animation: spin 1s linear infinite !important;
12966
- }
12967
- .lg\:animate\:bounce {
12968
- animation: bounce 1s infinite !important;
12969
- }
12970
- .lg\:animate\:pulse {
12971
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
12972
- }
12973
- }
12974
- /* Extra large screens (1280px+) */
12975
- @media (min-width: 1280px) {
12976
- .xl\:animate\:spin {
12977
- animation: spin 1s linear infinite !important;
12978
- }
12979
- .xl\:animate\:bounce {
12980
- animation: bounce 1s infinite !important;
12981
- }
12982
- .xl\:animate\:pulse {
12983
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
12984
- }
12985
- }
12986
- /* ===== ADVANCED DESIGN (고급 디자인) ===== */
12987
- /* ===== GRADIENTS UTILITIES ===== */
12988
- /* CSS 속성명과 값을 그대로 유지하는 NewTil CSS 철학 */
12989
- /* Gradient 속성들: linear-gradient, radial-gradient, conic-gradient 등 */
12990
- /* ===== LINEAR GRADIENTS (선형 그래디언트) ===== */
12991
- /* 기본 방향 그래디언트 (Variables 사용) */
12992
- .background\:linear-gradient\(to\ right\),
12993
- .bg\:gradient-to-r {
12994
- background: linear-gradient(
12995
- to right,
12996
- var(--gradient-from, var(--color-main-1)),
12997
- var(--gradient-to, var(--color-sub-1))
12998
- ) !important;
12999
- }
13000
- .background\:linear-gradient\(to\ left\),
13001
- .bg\:gradient-to-l {
13002
- background: linear-gradient(
13003
- to left,
13004
- var(--gradient-from, var(--color-main-1)),
13005
- var(--gradient-to, var(--color-sub-1))
13006
- ) !important;
13007
- }
13008
- .background\:linear-gradient\(to\ bottom\),
13009
- .bg\:gradient-to-b {
13010
- background: linear-gradient(
13011
- to bottom,
13012
- var(--gradient-from, var(--color-main-1)),
13013
- var(--gradient-to, var(--color-sub-1))
13014
- ) !important;
13015
- }
13016
- .background\:linear-gradient\(to\ top\),
13017
- .bg\:gradient-to-t {
13018
- background: linear-gradient(
13019
- to top,
13020
- var(--gradient-from, var(--color-main-1)),
13021
- var(--gradient-to, var(--color-sub-1))
13022
- ) !important;
13023
- }
13024
- /* 대각선 gradient */
13025
- .background\:linear-gradient\(45deg\),
13026
- .bg\:gradient-45 {
13027
- background: linear-gradient(
13028
- 45deg,
13029
- var(--gradient-from, var(--color-main-1)),
13030
- var(--gradient-to, var(--color-sub-1))
13031
- ) !important;
13032
- }
13033
- .background\:linear-gradient\(135deg\),
13034
- .bg\:gradient-135 {
13035
- background: linear-gradient(
13036
- 135deg,
13037
- var(--gradient-from, var(--color-main-1)),
13038
- var(--gradient-to, var(--color-sub-1))
13039
- ) !important;
13040
- }
13041
- /* ===== 사전 정의된 그래디언트 (테마 기반) ===== */
13042
- /* 메인 색상 그래디언트 */
13043
- .bg\:gradient-main {
13044
- background: var(--gradient-main) !important;
13045
- }
13046
- .bg\:gradient-main-vertical {
13047
- background: var(--gradient-main-vertical) !important;
13048
- }
13049
- /* 서브 색상 그래디언트 */
13050
- .bg\:gradient-sub {
13051
- background: var(--gradient-sub) !important;
13052
- }
13053
- /* 액센트 색상 그래디언트 */
13054
- .bg\:gradient-accent {
13055
- background: var(--gradient-accent) !important;
13056
- }
13057
- /* 베이스 색상 그래디언트 (회색조) */
13058
- .bg\:gradient-base {
13059
- background: var(--gradient-base) !important;
13060
- }
13061
- .bg\:gradient-dark {
13062
- background: var(--gradient-dark) !important;
13063
- }
13064
- /* 혼합 색상 그래디언트 */
13065
- .bg\:gradient-main-accent {
13066
- background: var(--gradient-main-accent) !important;
13067
- }
13068
- .bg\:gradient-sub-accent {
13069
- background: var(--gradient-sub-accent) !important;
13070
- }
13071
- /* ===== 투명도 그래디언트 ===== */
13072
- /* 페이드 아웃 그래디언트 */
13073
- .bg\:gradient-fade-r {
13074
- background: var(--gradient-fade-right) !important;
13075
- }
13076
- .bg\:gradient-fade-l {
13077
- background: var(--gradient-fade-left) !important;
13078
- }
13079
- .bg\:gradient-fade-b {
13080
- background: var(--gradient-fade-bottom) !important;
13081
- }
13082
- .bg\:gradient-fade-t {
13083
- background: var(--gradient-fade-top) !important;
13084
- }
13085
- /* 오버레이 그래디언트 */
13086
- .bg\:gradient-overlay-dark {
13087
- background: var(--gradient-overlay-dark) !important;
13088
- }
13089
- .bg\:gradient-overlay-light {
13090
- background: var(--gradient-overlay-light) !important;
13091
- }
13092
- /* ===== RADIAL GRADIENTS (원형 그래디언트) ===== */
13093
- .bg\:radial-gradient-main {
13094
- background: var(--gradient-radial-main) !important;
13095
- }
13096
- .bg\:radial-gradient-sub {
13097
- background: var(--gradient-radial-sub) !important;
13098
- }
13099
- .bg\:radial-gradient-accent {
13100
- background: var(--gradient-radial-accent) !important;
13101
- }
13102
- .bg\:radial-gradient-ellipse {
13103
- background: var(--gradient-radial-ellipse) !important;
13104
- }
13105
- /* 위치별 radial gradient */
13106
- .bg\:radial-gradient-top {
13107
- background: var(--gradient-radial-top) !important;
13108
- }
13109
- .bg\:radial-gradient-bottom {
13110
- background: var(--gradient-radial-bottom) !important;
13111
- }
13112
- .bg\:radial-gradient-left {
13113
- background: var(--gradient-radial-left) !important;
13114
- }
13115
- .bg\:radial-gradient-right {
13116
- background: var(--gradient-radial-right) !important;
13117
- }
13118
- /* ===== CONIC GRADIENTS (원뿔형 그래디언트) ===== */
13119
- .bg\:conic-gradient-rainbow {
13120
- background: var(--gradient-conic-rainbow) !important;
13121
- }
13122
- .bg\:conic-gradient-main {
13123
- background: var(--gradient-conic-main) !important;
13124
- }
13125
- .bg\:conic-spinner {
13126
- background: var(--gradient-conic-spinner) !important;
13127
- }
13128
- /* ===== 멀티 컬러 그래디언트 ===== */
13129
- .bg\:gradient-triple {
13130
- background: var(--gradient-triple) !important;
13131
- }
13132
- .bg\:gradient-quad {
13133
- background: var(--gradient-quad) !important;
13134
- }
13135
- .bg\:gradient-rainbow {
13136
- background: var(--gradient-rainbow) !important;
13137
- }
13138
- /* ===== 특수 효과 그래디언트 ===== */
13139
- /* 글래스모피즘용 gradient */
13140
- .bg\:gradient-glass {
13141
- background: var(--gradient-glass) !important;
13142
- }
13143
- /* 네온 효과용 gradient */
13144
- .bg\:gradient-neon {
13145
- background: var(--gradient-neon) !important;
13146
- background-size: 200% 200% !important;
13147
- }
13148
- /* 애니메이션용 gradient */
13149
- .bg\:gradient-stripes {
13150
- background: var(--gradient-stripes) !important;
13151
- background-size: var(--space-8) var(--space-8) !important;
13152
- }
13153
- /* ===== TEXT GRADIENTS (텍스트 그래디언트) ===== */
13154
- .text-gradient-main {
13155
- background: var(--gradient-text-main) !important;
13156
- -webkit-background-clip: text !important;
13157
- background-clip: text !important;
13158
- -webkit-text-fill-color: transparent !important;
13159
- color: transparent !important;
13160
- }
13161
- .text-gradient-colorful {
13162
- background: var(--gradient-text-colorful) !important;
13163
- -webkit-background-clip: text !important;
13164
- background-clip: text !important;
13165
- -webkit-text-fill-color: transparent !important;
13166
- color: transparent !important;
13167
- }
13168
- .text-gradient-rainbow {
13169
- background: var(--gradient-text-rainbow) !important;
13170
- -webkit-background-clip: text !important;
13171
- background-clip: text !important;
13172
- -webkit-text-fill-color: transparent !important;
13173
- color: transparent !important;
13174
- }
13175
- /* ===== GRADIENT ANIMATION SUPPORT ===== */
13176
- .background-size\:200x200 {
13177
- background-size: 200% 200% !important;
13178
- }
13179
- .background-size\:400x400 {
13180
- background-size: 400% 400% !important;
13181
- }
13182
- .background-position\:0-50 {
13183
- background-position: 0% 50% !important;
13184
- }
13185
- .background-position\:100-50 {
13186
- background-position: 100% 50% !important;
13187
- }
13188
- .background-position\:50-0 {
13189
- background-position: 50% 0% !important;
13190
- }
13191
- .background-position\:50-100 {
13192
- background-position: 50% 100% !important;
13193
- }
13194
- /* ===== GRADIENT VARIABLES OVERRIDE ===== */
13195
- /* 커스텀 그래디언트 색상 변경용 유틸리티 */
13196
- .gradient-from\:main-1 {
13197
- --gradient-from: var(--color-main-1) !important;
13198
- }
13199
- .gradient-from\:sub-1 {
13200
- --gradient-from: var(--color-sub-1) !important;
13201
- }
13202
- .gradient-from\:accent-1 {
13203
- --gradient-from: var(--color-accent-1) !important;
13204
- }
13205
- .gradient-from\:white {
13206
- --gradient-from: var(--color-white) !important;
13207
- }
13208
- .gradient-from\:black {
13209
- --gradient-from: var(--color-black) !important;
13210
- }
13211
- .gradient-to\:main-3 {
13212
- --gradient-to: var(--color-main-3) !important;
13213
- }
13214
- .gradient-to\:sub-3 {
13215
- --gradient-to: var(--color-sub-3) !important;
13216
- }
13217
- .gradient-to\:accent-3 {
13218
- --gradient-to: var(--color-accent-3) !important;
13219
- }
13220
- .gradient-to\:transparent {
13221
- --gradient-to: transparent !important;
13222
- }
13223
- .gradient-to\:white {
13224
- --gradient-to: var(--color-white) !important;
13225
- }
13226
- .gradient-to\:black {
13227
- --gradient-to: var(--color-black) !important;
13228
- }
13229
- /* ===== RESPONSIVE GRADIENTS ===== */
13230
- /* Small screens (640px+) */
13231
- @media (min-width: 640px) {
13232
- .sm\:bg\:gradient-main {
13233
- background: var(--gradient-main) !important;
13234
- }
13235
- .sm\:bg\:gradient-to-r {
13236
- background: linear-gradient(
13237
- to right,
13238
- var(--gradient-from, var(--color-main-1)),
13239
- var(--gradient-to, var(--color-sub-1))
13240
- ) !important;
13241
- }
13242
- .sm\:text-gradient-main {
13243
- background: var(--gradient-text-main) !important;
13244
- -webkit-background-clip: text !important;
13245
- background-clip: text !important;
13246
- -webkit-text-fill-color: transparent !important;
13247
- color: transparent !important;
13248
- }
13249
- }
13250
- /* Medium screens (768px+) */
13251
- @media (min-width: 768px) {
13252
- .md\:bg\:gradient-main {
13253
- background: var(--gradient-main) !important;
13254
- }
13255
- .md\:bg\:gradient-to-r {
13256
- background: linear-gradient(
13257
- to right,
13258
- var(--gradient-from, var(--color-main-1)),
13259
- var(--gradient-to, var(--color-sub-1))
13260
- ) !important;
13261
- }
13262
- .md\:text-gradient-main {
13263
- background: var(--gradient-text-main) !important;
13264
- -webkit-background-clip: text !important;
13265
- background-clip: text !important;
13266
- -webkit-text-fill-color: transparent !important;
13267
- color: transparent !important;
13268
- }
13269
- }
13270
- /* Large screens (1024px+) */
13271
- @media (min-width: 1024px) {
13272
- .lg\:bg\:gradient-main {
13273
- background: var(--gradient-main) !important;
13274
- }
13275
- .lg\:bg\:gradient-to-r {
13276
- background: linear-gradient(
13277
- to right,
13278
- var(--gradient-from, var(--color-main-1)),
13279
- var(--gradient-to, var(--color-sub-1))
13280
- ) !important;
13281
- }
13282
- .lg\:text-gradient-main {
13283
- background: var(--gradient-text-main) !important;
13284
- -webkit-background-clip: text !important;
13285
- background-clip: text !important;
13286
- -webkit-text-fill-color: transparent !important;
13287
- color: transparent !important;
13288
- }
13289
- }
13290
- /* Extra large screens (1280px+) */
13291
- @media (min-width: 1280px) {
13292
- .xl\:bg\:gradient-main {
13293
- background: var(--gradient-main) !important;
13294
- }
13295
- .xl\:bg\:gradient-to-r {
13296
- background: linear-gradient(
13297
- to right,
13298
- var(--gradient-from, var(--color-main-1)),
13299
- var(--gradient-to, var(--color-sub-1))
13300
- ) !important;
13301
- }
13302
- .xl\:text-gradient-main {
13303
- background: var(--gradient-text-main) !important;
13304
- -webkit-background-clip: text !important;
13305
- background-clip: text !important;
13306
- -webkit-text-fill-color: transparent !important;
13307
- color: transparent !important;
13308
- }
13309
- }
13310
- /* ===== MASKS & CLIP PATH UTILITIES ===== */
13311
- /* CSS 속성명과 값을 그대로 유지하는 NewTil CSS 철학 */
13312
- /* Mask, Clip Path 속성들: mask, clip-path, mask-image 등 */
13313
- /* ===== CLIP PATH (클립 경로) ===== */
13314
- /* 기본 도형 클립 */
13315
- /* clip-path: none */
13316
- .clip-path\:none {
13317
- clip-path: none !important;
13318
- }
13319
- /* clip-path: inset (직사각형 클립) */
13320
- .clip-path\:inset\(0\) {
13321
- clip-path: inset(0) !important;
13322
- }
13323
- .clip-path\:inset\(0\.125rem\),
13324
- .clip-path\:inset\(0_5\) {
13325
- clip-path: inset(var(--space-0_5)) !important;
13326
- }
13327
- .clip-path\:inset\(0\.25rem\),
13328
- .clip-path\:inset\(1\) {
13329
- clip-path: inset(var(--space-1)) !important;
13330
- }
13331
- .clip-path\:inset\(0\.5rem\),
13332
- .clip-path\:inset\(2\) {
13333
- clip-path: inset(var(--space-2)) !important;
13334
- }
13335
- .clip-path\:inset\(1rem\),
13336
- .clip-path\:inset\(4\) {
13337
- clip-path: inset(var(--space-4)) !important;
13338
- }
13339
- /* clip-path: circle (원형 클립) */
13340
- .clip-path\:circle\(50%\),
13341
- .clip\:circle {
13342
- clip-path: circle(50%) !important;
13343
- }
13344
- .clip-path\:circle\(25%\),
13345
- .clip\:circle-sm {
13346
- clip-path: circle(25%) !important;
13347
- }
13348
- .clip-path\:circle\(75%\),
13349
- .clip\:circle-lg {
13350
- clip-path: circle(75%) !important;
13351
- }
13352
- .clip-path\:circle\(40%\ at\ 30%\ 30%\),
13353
- .clip\:circle-offset {
13354
- clip-path: circle(40% at 30% 30%) !important;
13355
- }
13356
- /* clip-path: ellipse (타원형 클립) */
13357
- .clip-path\:ellipse\(50%\ 25%\),
13358
- .clip\:ellipse {
13359
- clip-path: ellipse(50% 25%) !important;
13360
- }
13361
- .clip-path\:ellipse\(75%\ 50%\),
13362
- .clip\:ellipse-wide {
13363
- clip-path: ellipse(75% 50%) !important;
13364
- }
13365
- .clip-path\:ellipse\(25%\ 50%\),
13366
- .clip\:ellipse-tall {
13367
- clip-path: ellipse(25% 50%) !important;
13368
- }
13369
- /* ===== 다각형 클립 ===== */
13370
- /* clip-path: polygon (삼각형) */
13371
- .clip-path\:polygon\(50%\ 0%\,\ 0%\ 100%\,\ 100%\ 100%\),
13372
- .clip\:triangle {
13373
- clip-path: polygon(50% 0%, 0% 100%, 100% 100%) !important;
13374
- }
13375
- .clip-path\:polygon\(50%\ 100%\,\ 0%\ 0%\,\ 100%\ 0%\),
13376
- .clip\:triangle-up {
13377
- clip-path: polygon(50% 100%, 0% 0%, 100% 0%) !important;
13378
- }
13379
- .clip-path\:polygon\(0%\ 50%\,\ 100%\ 0%\,\ 100%\ 100%\),
13380
- .clip\:triangle-right {
13381
- clip-path: polygon(0% 50%, 100% 0%, 100% 100%) !important;
13382
- }
13383
- .clip-path\:polygon\(100%\ 50%\,\ 0%\ 0%\,\ 0%\ 100%\),
13384
- .clip\:triangle-left {
13385
- clip-path: polygon(100% 50%, 0% 0%, 0% 100%) !important;
13386
- }
13387
- /* clip-path: polygon (사각형 변형) */
13388
- .clip-path\:polygon\(25%\ 0%\,\ 100%\ 0%\,\ 75%\ 100%\,\ 0%\ 100%\),
13389
- .clip\:parallelogram {
13390
- clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%) !important;
13391
- }
13392
- .clip-path\:polygon\(20%\ 0%\,\ 80%\ 0%\,\ 100%\ 100%\,\ 0%\ 100%\),
13393
- .clip\:trapezoid {
13394
- clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%) !important;
13395
- }
13396
- /* clip-path: polygon (오각형) */
13397
- .clip-path\:polygon\(50%\ 0%\,\ 100%\ 38%\,\ 82%\ 100%\,\ 18%\ 100%\,\ 0%\ 38%\),
13398
- .clip\:pentagon {
13399
- clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%) !important;
13400
- }
13401
- /* clip-path: polygon (육각형) */
13402
- .clip-path\:polygon\(25%\ 0%\,\ 75%\ 0%\,\ 100%\ 50%\,\ 75%\ 100%\,\ 25%\ 100%\,\ 0%\ 50%\),
13403
- .clip\:hexagon {
13404
- clip-path: polygon(
13405
- 25% 0%,
13406
- 75% 0%,
13407
- 100% 50%,
13408
- 75% 100%,
13409
- 25% 100%,
13410
- 0% 50%
13411
- ) !important;
13412
- }
13413
- /* clip-path: polygon (별) */
13414
- .clip-path\:polygon\(50%\ 0%\,\ 61%\ 35%\,\ 98%\ 35%\,\ 68%\ 57%\,\ 79%\ 91%\,\ 50%\ 70%\,\ 21%\ 91%\,\ 32%\ 57%\,\ 2%\ 35%\,\ 39%\ 35%\),
13415
- .clip\:star {
13416
- clip-path: polygon(
13417
- 50% 0%,
13418
- 61% 35%,
13419
- 98% 35%,
13420
- 68% 57%,
13421
- 79% 91%,
13422
- 50% 70%,
13423
- 21% 91%,
13424
- 32% 57%,
13425
- 2% 35%,
13426
- 39% 35%
13427
- ) !important;
13428
- }
13429
- /* ===== 특수 모양 클립 ===== */
13430
- /* 화살표 */
13431
- .clip-path\:polygon\(0%\ 20%\,\ 60%\ 20%\,\ 60%\ 0%\,\ 100%\ 50%\,\ 60%\ 100%\,\ 60%\ 80%\,\ 0%\ 80%\),
13432
- .clip\:arrow-right {
13433
- clip-path: polygon(
13434
- 0% 20%,
13435
- 60% 20%,
13436
- 60% 0%,
13437
- 100% 50%,
13438
- 60% 100%,
13439
- 60% 80%,
13440
- 0% 80%
13441
- ) !important;
13442
- }
13443
- .clip-path\:polygon\(40%\ 0%\,\ 40%\ 20%\,\ 100%\ 20%\,\ 100%\ 80%\,\ 40%\ 80%\,\ 40%\ 100%\,\ 0%\ 50%\),
13444
- .clip\:arrow-left {
13445
- clip-path: polygon(
13446
- 40% 0%,
13447
- 40% 20%,
13448
- 100% 20%,
13449
- 100% 80%,
13450
- 40% 80%,
13451
- 40% 100%,
13452
- 0% 50%
13453
- ) !important;
13454
- }
13455
- /* 하트 */
13456
- .clip-path\:path\(\"M12\,21\.35l-1\.45\-1\.32c5\.4\,15\.36\,2\,12\.28\,2\,8\.5\ 2\,5\.42\ 4\.42\,3\ 7\.5\,3c1\.74\,0\ 3\.41\,\.81\ 4\.5\,2\.09c13\.09\,3\.81\ 14\.76\,3\ 16\.5\,3\ 19\.58\,3\ 22\,5\.42\ 22\,8\.5c0\,3\.78\-3\.4\,6\.86\-8\.55\,11\.54l12\,21\.35z\"\),
13457
- .clip\:heart {
13458
- clip-path: path(
13459
- "M12,21.35l-1.45-1.32C5.4,15.36,2,12.28,2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78-3.4,6.86-8.55,11.54L12,21.35z"
13460
- ) !important;
13461
- }
13462
- /* 메시지 말풍선 */
13463
- .clip-path\:polygon\(0%\ 0%\,\ 100%\ 0%\,\ 100%\ 75%\,\ 75%\ 75%\,\ 75%\ 100%\,\ 50%\ 75%\,\ 0%\ 75%\),
13464
- .clip\:speech-bubble {
13465
- clip-path: polygon(
13466
- 0% 0%,
13467
- 100% 0%,
13468
- 100% 75%,
13469
- 75% 75%,
13470
- 75% 100%,
13471
- 50% 75%,
13472
- 0% 75%
13473
- ) !important;
13474
- }
13475
- /* 십자가 */
13476
- .clip-path\:polygon\(40%\ 0%\,\ 60%\ 0%\,\ 60%\ 40%\,\ 100%\ 40%\,\ 100%\ 60%\,\ 60%\ 60%\,\ 60%\ 100%\,\ 40%\ 100%\,\ 40%\ 60%\,\ 0%\ 60%\,\ 0%\ 40%\,\ 40%\ 40%\),
13477
- .clip\:cross {
13478
- clip-path: polygon(
13479
- 40% 0%,
13480
- 60% 0%,
13481
- 60% 40%,
13482
- 100% 40%,
13483
- 100% 60%,
13484
- 60% 60%,
13485
- 60% 100%,
13486
- 40% 100%,
13487
- 40% 60%,
13488
- 0% 60%,
13489
- 0% 40%,
13490
- 40% 40%
13491
- ) !important;
13492
- }
13493
- /* ===== MASK (마스크) ===== */
13494
- /* mask: none */
13495
- .mask\:none {
13496
- mask: none !important;
13497
- -webkit-mask: none !important;
13498
- }
13499
- /* 기본 그래디언트 마스크 */
13500
- .mask\:linear-gradient\(to\ bottom\,\ black\,\ transparent\),
13501
- .mask\:fade-bottom {
13502
- mask: linear-gradient(to bottom, black, transparent) !important;
13503
- -webkit-mask: linear-gradient(to bottom, black, transparent) !important;
13504
- }
13505
- .mask\:linear-gradient\(to\ top\,\ black\,\ transparent\),
13506
- .mask\:fade-top {
13507
- mask: linear-gradient(to top, black, transparent) !important;
13508
- -webkit-mask: linear-gradient(to top, black, transparent) !important;
13509
- }
13510
- .mask\:linear-gradient\(to\ right\,\ black\,\ transparent\),
13511
- .mask\:fade-right {
13512
- mask: linear-gradient(to right, black, transparent) !important;
13513
- -webkit-mask: linear-gradient(to right, black, transparent) !important;
13514
- }
13515
- .mask\:linear-gradient\(to\ left\,\ black\,\ transparent\),
13516
- .mask\:fade-left {
13517
- mask: linear-gradient(to left, black, transparent) !important;
13518
- -webkit-mask: linear-gradient(to left, black, transparent) !important;
13519
- }
13520
- /* 원형 마스크 */
13521
- .mask\:radial-gradient\(circle\,\ black\ 50%\,\ transparent\ 50%\),
13522
- .mask\:circle {
13523
- mask: radial-gradient(circle, black 50%, transparent 50%) !important;
13524
- -webkit-mask: radial-gradient(circle, black 50%, transparent 50%) !important;
13525
- }
13526
- .mask\:radial-gradient\(circle\,\ black\ 25%\,\ transparent\ 25%\),
13527
- .mask\:circle-sm {
13528
- mask: radial-gradient(circle, black 25%, transparent 25%) !important;
13529
- -webkit-mask: radial-gradient(circle, black 25%, transparent 25%) !important;
13530
- }
13531
- .mask\:radial-gradient\(circle\,\ black\ 75%\,\ transparent\ 75%\),
13532
- .mask\:circle-lg {
13533
- mask: radial-gradient(circle, black 75%, transparent 75%) !important;
13534
- -webkit-mask: radial-gradient(circle, black 75%, transparent 75%) !important;
13535
- }
13536
- /* 텍스트 마스크 */
13537
- .mask\:linear-gradient\(45deg\,\ black\ 25%\,\ transparent\ 25%\,\ transparent\ 75%\,\ black\ 75%\),
13538
- .mask\:stripes {
13539
- mask: linear-gradient(
13540
- 45deg,
13541
- black 25%,
13542
- transparent 25%,
13543
- transparent 75%,
13544
- black 75%
13545
- ) !important;
13546
- -webkit-mask: linear-gradient(
13547
- 45deg,
13548
- black 25%,
13549
- transparent 25%,
13550
- transparent 75%,
13551
- black 75%
13552
- ) !important;
13553
- mask-size: var(--space-4) var(--space-4) !important;
13554
- -webkit-mask-size: var(--space-4) var(--space-4) !important;
13555
- }
13556
- /* ===== MASK PROPERTIES ===== */
13557
- /* mask-size */
13558
- .mask-size\:contain {
13559
- mask-size: contain !important;
13560
- -webkit-mask-size: contain !important;
13561
- }
13562
- .mask-size\:cover {
13563
- mask-size: cover !important;
13564
- -webkit-mask-size: cover !important;
13565
- }
13566
- .mask-size\:100%\ 100% {
13567
- mask-size: 100% 100% !important;
13568
- -webkit-mask-size: 100% 100% !important;
13569
- }
13570
- .mask-size\:50%\ 50% {
13571
- mask-size: 50% 50% !important;
13572
- -webkit-mask-size: 50% 50% !important;
13573
- }
13574
- /* mask-repeat */
13575
- .mask-repeat\:no-repeat {
13576
- mask-repeat: no-repeat !important;
13577
- -webkit-mask-repeat: no-repeat !important;
13578
- }
13579
- .mask-repeat\:repeat {
13580
- mask-repeat: repeat !important;
13581
- -webkit-mask-repeat: repeat !important;
13582
- }
13583
- .mask-repeat\:repeat-x {
13584
- mask-repeat: repeat-x !important;
13585
- -webkit-mask-repeat: repeat-x !important;
13586
- }
13587
- .mask-repeat\:repeat-y {
13588
- mask-repeat: repeat-y !important;
13589
- -webkit-mask-repeat: repeat-y !important;
13590
- }
13591
- /* mask-position */
13592
- .mask-position\:center {
13593
- mask-position: center !important;
13594
- -webkit-mask-position: center !important;
13595
- }
13596
- .mask-position\:top {
13597
- mask-position: top !important;
13598
- -webkit-mask-position: top !important;
13599
- }
13600
- .mask-position\:bottom {
13601
- mask-position: bottom !important;
13602
- -webkit-mask-position: bottom !important;
13603
- }
13604
- .mask-position\:left {
13605
- mask-position: left !important;
13606
- -webkit-mask-position: left !important;
13607
- }
13608
- .mask-position\:right {
13609
- mask-position: right !important;
13610
- -webkit-mask-position: right !important;
13611
- }
13612
- /* ===== 복합 효과 ===== */
13613
- /* 글래스 모피즘용 클립 */
13614
- .clip\:glass {
13615
- clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 5% 100%) !important;
13616
- }
13617
- /* 카드 모서리 효과 */
13618
- .clip\:card-corner {
13619
- clip-path: polygon(
13620
- 0% 0%,
13621
- calc(100% - 1rem) 0%,
13622
- 100% 1rem,
13623
- 100% 100%,
13624
- 0% 100%
13625
- ) !important;
13626
- }
13627
- /* 리본 효과 */
13628
- .clip\:ribbon {
13629
- clip-path: polygon(
13630
- 0% 0%,
13631
- 100% 0%,
13632
- 90% 50%,
13633
- 100% 100%,
13634
- 0% 100%,
13635
- 10% 50%
13636
- ) !important;
13637
- }
13638
- /* 파도 효과 */
13639
- .clip\:wave-top {
13640
- clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%) !important;
13641
- }
13642
- .clip\:wave-bottom {
13643
- clip-path: polygon(0% 0%, 100% 15%, 100% 100%, 0% 100%) !important;
13644
- }
13645
- /* ===== RESPONSIVE MASKS & CLIPS ===== */
13646
- /* Small screens (640px+) */
13647
- @media (min-width: 640px) {
13648
- .sm\:clip\:circle {
13649
- clip-path: circle(50%) !important;
13650
- }
13651
- .sm\:clip\:triangle {
13652
- clip-path: polygon(50% 0%, 0% 100%, 100% 100%) !important;
13653
- }
13654
- .sm\:mask\:fade-bottom {
13655
- mask: linear-gradient(to bottom, black, transparent) !important;
13656
- -webkit-mask: linear-gradient(to bottom, black, transparent) !important;
13657
- }
13658
- }
13659
- /* Medium screens (768px+) */
13660
- @media (min-width: 768px) {
13661
- .md\:clip\:circle {
13662
- clip-path: circle(50%) !important;
13663
- }
13664
- .md\:clip\:triangle {
13665
- clip-path: polygon(50% 0%, 0% 100%, 100% 100%) !important;
13666
- }
13667
- .md\:mask\:fade-bottom {
13668
- mask: linear-gradient(to bottom, black, transparent) !important;
13669
- -webkit-mask: linear-gradient(to bottom, black, transparent) !important;
13670
- }
13671
- }
13672
- /* Large screens (1024px+) */
13673
- @media (min-width: 1024px) {
13674
- .lg\:clip\:circle {
13675
- clip-path: circle(50%) !important;
13676
- }
13677
- .lg\:clip\:triangle {
13678
- clip-path: polygon(50% 0%, 0% 100%, 100% 100%) !important;
13679
- }
13680
- .lg\:mask\:fade-bottom {
13681
- mask: linear-gradient(to bottom, black, transparent) !important;
13682
- -webkit-mask: linear-gradient(to bottom, black, transparent) !important;
13683
- }
13684
- }
13685
- /* Extra large screens (1280px+) */
13686
- @media (min-width: 1280px) {
13687
- .xl\:clip\:circle {
13688
- clip-path: circle(50%) !important;
13689
- }
13690
- .xl\:clip\:triangle {
13691
- clip-path: polygon(50% 0%, 0% 100%, 100% 100%) !important;
13692
- }
13693
- .xl\:mask\:fade-bottom {
13694
- mask: linear-gradient(to bottom, black, transparent) !important;
13695
- -webkit-mask: linear-gradient(to bottom, black, transparent) !important;
13696
- }
13697
- }
13698
- /* ===== ADVANCED FILTERS UTILITIES ===== */
13699
- /* CSS 속성명과 값을 그대로 유지하는 NewTil CSS 철학 */
13700
- /* 고급 필터 효과: 복합 필터, 드롭 섀도우, 블렌드 모드 등 */
13701
- /* ===== DROP SHADOW (드롭 섀도우) ===== */
13702
- /* filter: drop-shadow() - Variables 사용 */
13703
- .drop-shadow\:sm,
13704
- .drop-shadow\:1 {
13705
- filter: var(--drop-shadow-sm) !important;
13706
- }
13707
- .drop-shadow\:base,
13708
- .drop-shadow\:2 {
13709
- filter: var(--drop-shadow-base) !important;
13710
- }
13711
- .drop-shadow\:md,
13712
- .drop-shadow\:3 {
13713
- filter: var(--drop-shadow-md) !important;
13714
- }
13715
- .drop-shadow\:lg {
13716
- filter: var(--drop-shadow-lg) !important;
13717
- }
13718
- .drop-shadow\:xl {
13719
- filter: var(--drop-shadow-xl) !important;
13720
- }
13721
- .drop-shadow\:2xl {
13722
- filter: var(--drop-shadow-2xl) !important;
13723
- }
13724
- /* 컬러 드롭 섀도우 - Variables 사용 */
13725
- .drop-shadow\:main {
13726
- filter: var(--drop-shadow-main) !important;
13727
- }
13728
- .drop-shadow\:sub {
13729
- filter: var(--drop-shadow-sub) !important;
13730
- }
13731
- .drop-shadow\:accent {
13732
- filter: var(--drop-shadow-accent) !important;
13733
- }
13734
- /* 네온 효과 드롭 섀도우 - Variables 사용 */
13735
- .drop-shadow\:neon-main {
13736
- filter: var(--drop-shadow-neon-main) !important;
13737
- }
13738
- .drop-shadow\:neon-accent {
13739
- filter: var(--drop-shadow-neon-accent) !important;
13740
- }
13741
- /* ===== 복합 필터 효과 - Variables 사용 ===== */
13742
- /* 세피아 + 대비 효과 */
13743
- .filter\:vintage {
13744
- filter: var(--filter-vintage) !important;
13745
- }
13746
- /* 흑백 + 대비 효과 */
13747
- .filter\:dramatic {
13748
- filter: var(--filter-dramatic) !important;
13749
- }
13750
- /* 밝기 + 채도 효과 */
13751
- .filter\:vibrant {
13752
- filter: var(--filter-vibrant) !important;
13753
- }
13754
- /* 따뜻한 톤 효과 */
13755
- .filter\:warm {
13756
- filter: var(--filter-warm) !important;
13757
- }
13758
- /* 차가운 톤 효과 */
13759
- .filter\:cool {
13760
- filter: var(--filter-cool) !important;
13761
- }
13762
- /* 드림 효과 */
13763
- .filter\:dreamy {
13764
- filter: var(--filter-dreamy) !important;
13765
- }
13766
- /* 시네마틱 효과 */
13767
- .filter\:cinematic {
13768
- filter: var(--filter-cinematic) !important;
13769
- }
13770
- /* 리트로 효과 */
13771
- .filter\:retro {
13772
- filter: var(--filter-retro) !important;
13773
- }
13774
- /* ===== BLEND MODES (블렌드 모드) ===== */
13775
- /* mix-blend-mode */
13776
- .mix-blend-mode\:normal {
13777
- mix-blend-mode: normal !important;
13778
- }
13779
- .mix-blend-mode\:multiply {
13780
- mix-blend-mode: multiply !important;
13781
- }
13782
- .mix-blend-mode\:screen {
13783
- mix-blend-mode: screen !important;
13784
- }
13785
- .mix-blend-mode\:overlay {
13786
- mix-blend-mode: overlay !important;
13787
- }
13788
- .mix-blend-mode\:darken {
13789
- mix-blend-mode: darken !important;
13790
- }
13791
- .mix-blend-mode\:lighten {
13792
- mix-blend-mode: lighten !important;
13793
- }
13794
- .mix-blend-mode\:color-dodge {
13795
- mix-blend-mode: color-dodge !important;
13796
- }
13797
- .mix-blend-mode\:color-burn {
13798
- mix-blend-mode: color-burn !important;
13799
- }
13800
- .mix-blend-mode\:hard-light {
13801
- mix-blend-mode: hard-light !important;
13802
- }
13803
- .mix-blend-mode\:soft-light {
13804
- mix-blend-mode: soft-light !important;
13805
- }
13806
- .mix-blend-mode\:difference {
13807
- mix-blend-mode: difference !important;
13808
- }
13809
- .mix-blend-mode\:exclusion {
13810
- mix-blend-mode: exclusion !important;
13811
- }
13812
- .mix-blend-mode\:hue {
13813
- mix-blend-mode: hue !important;
13814
- }
13815
- .mix-blend-mode\:saturation {
13816
- mix-blend-mode: saturation !important;
13817
- }
13818
- .mix-blend-mode\:color {
13819
- mix-blend-mode: color !important;
13820
- }
13821
- .mix-blend-mode\:luminosity {
13822
- mix-blend-mode: luminosity !important;
13823
- }
13824
- /* background-blend-mode */
13825
- .background-blend-mode\:normal {
13826
- background-blend-mode: normal !important;
13827
- }
13828
- .background-blend-mode\:multiply {
13829
- background-blend-mode: multiply !important;
13830
- }
13831
- .background-blend-mode\:screen {
13832
- background-blend-mode: screen !important;
13833
- }
13834
- .background-blend-mode\:overlay {
13835
- background-blend-mode: overlay !important;
13836
- }
13837
- .background-blend-mode\:darken {
13838
- background-blend-mode: darken !important;
13839
- }
13840
- .background-blend-mode\:lighten {
13841
- background-blend-mode: lighten !important;
13842
- }
13843
- .background-blend-mode\:color-dodge {
13844
- background-blend-mode: color-dodge !important;
13845
- }
13846
- .background-blend-mode\:color-burn {
13847
- background-blend-mode: color-burn !important;
13848
- }
13849
- .background-blend-mode\:hard-light {
13850
- background-blend-mode: hard-light !important;
13851
- }
13852
- .background-blend-mode\:soft-light {
13853
- background-blend-mode: soft-light !important;
13854
- }
13855
- .background-blend-mode\:difference {
13856
- background-blend-mode: difference !important;
13857
- }
13858
- .background-blend-mode\:exclusion {
13859
- background-blend-mode: exclusion !important;
13860
- }
13861
- .background-blend-mode\:hue {
13862
- background-blend-mode: hue !important;
13863
- }
13864
- .background-blend-mode\:saturation {
13865
- background-blend-mode: saturation !important;
13866
- }
13867
- .background-blend-mode\:color {
13868
- background-blend-mode: color !important;
13869
- }
13870
- .background-blend-mode\:luminosity {
13871
- background-blend-mode: luminosity !important;
13872
- }
13873
- /* ===== 축약 블렌드 모드 ===== */
13874
- .blend\:normal {
13875
- mix-blend-mode: normal !important;
13876
- }
13877
- .blend\:multiply {
13878
- mix-blend-mode: multiply !important;
13879
- }
13880
- .blend\:screen {
13881
- mix-blend-mode: screen !important;
13882
- }
13883
- .blend\:overlay {
13884
- mix-blend-mode: overlay !important;
13885
- }
13886
- .blend\:darken {
13887
- mix-blend-mode: darken !important;
13888
- }
13889
- .blend\:lighten {
13890
- mix-blend-mode: lighten !important;
13891
- }
13892
- .blend\:color-dodge {
13893
- mix-blend-mode: color-dodge !important;
13894
- }
13895
- .blend\:color-burn {
13896
- mix-blend-mode: color-burn !important;
13897
- }
13898
- .blend\:hard-light {
13899
- mix-blend-mode: hard-light !important;
13900
- }
13901
- .blend\:soft-light {
13902
- mix-blend-mode: soft-light !important;
13903
- }
13904
- .blend\:difference {
13905
- mix-blend-mode: difference !important;
13906
- }
13907
- .blend\:exclusion {
13908
- mix-blend-mode: exclusion !important;
13909
- }
13910
- .blend\:hue {
13911
- mix-blend-mode: hue !important;
13912
- }
13913
- .blend\:saturation {
13914
- mix-blend-mode: saturation !important;
13915
- }
13916
- .blend\:color {
13917
- mix-blend-mode: color !important;
13918
- }
13919
- .blend\:luminosity {
13920
- mix-blend-mode: luminosity !important;
13921
- }
13922
- .bg-blend\:normal {
13923
- background-blend-mode: normal !important;
13924
- }
13925
- .bg-blend\:multiply {
13926
- background-blend-mode: multiply !important;
13927
- }
13928
- .bg-blend\:screen {
13929
- background-blend-mode: screen !important;
13930
- }
13931
- .bg-blend\:overlay {
13932
- background-blend-mode: overlay !important;
13933
- }
13934
- .bg-blend\:darken {
13935
- background-blend-mode: darken !important;
13936
- }
13937
- .bg-blend\:lighten {
13938
- background-blend-mode: lighten !important;
13939
- }
13940
- .bg-blend\:color-dodge {
13941
- background-blend-mode: color-dodge !important;
13942
- }
13943
- .bg-blend\:color-burn {
13944
- background-blend-mode: color-burn !important;
13945
- }
13946
- .bg-blend\:hard-light {
13947
- background-blend-mode: hard-light !important;
13948
- }
13949
- .bg-blend\:soft-light {
13950
- background-blend-mode: soft-light !important;
13951
- }
13952
- .bg-blend\:difference {
13953
- background-blend-mode: difference !important;
13954
- }
13955
- .bg-blend\:exclusion {
13956
- background-blend-mode: exclusion !important;
13957
- }
13958
- .bg-blend\:hue {
13959
- background-blend-mode: hue !important;
13960
- }
13961
- .bg-blend\:saturation {
13962
- background-blend-mode: saturation !important;
13963
- }
13964
- .bg-blend\:color {
13965
- background-blend-mode: color !important;
13966
- }
13967
- .bg-blend\:luminosity {
13968
- background-blend-mode: luminosity !important;
13969
- }
13970
- /* ===== ISOLATION (격리) ===== */
13971
- .isolation\:auto {
13972
- isolation: auto !important;
13973
- }
13974
- .isolation\:isolate {
13975
- isolation: isolate !important;
13976
- }
13977
- .isolate {
13978
- isolation: isolate !important;
13979
- }
13980
- /* ===== CSS FILTER FUNCTIONS (고급 필터) ===== */
13981
- /* url() 필터 (SVG 필터) */
13982
- .filter\:url\(\#svg-filter\) {
13983
- filter: url(#svg-filter) !important;
13984
- }
13985
- /* 복합 필터 조합 */
13986
- .filter\:blur\(2px\)\ drop-shadow\(0\ 4px\ 8px\ rgba\(0\,\ 0\,\ 0\,\ 0\.3\)\),
13987
- .filter\:blur-shadow {
13988
- filter: blur(2px) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) !important;
13989
- }
13990
- .filter\:saturate\(2\)\ hue-rotate\(90deg\)\ contrast\(1\.5\),
13991
- .filter\:psychedelic {
13992
- filter: saturate(2) hue-rotate(90deg) contrast(1.5) !important;
13993
- }
13994
- .filter\:brightness\(0\.5\)\ contrast\(2\)\ saturate\(0\),
13995
- .filter\:high-contrast {
13996
- filter: brightness(0.5) contrast(2) saturate(0) !important;
13997
- }
13998
- /* ===== 특수 효과 필터 ===== */
13999
- /* 글로우 효과 - Variables 사용 */
14000
- .filter\:glow-main {
14001
- filter: var(--filter-glow-main) !important;
14002
- }
14003
- .filter\:glow-accent {
14004
- filter: var(--filter-glow-accent) !important;
14005
- }
14006
- /* 홀로그램 효과 - Variables 사용 */
14007
- .filter\:hologram {
14008
- filter: var(--filter-hologram) !important;
14009
- }
14010
- /* X-ray 효과 - Variables 사용 */
14011
- .filter\:xray {
14012
- filter: var(--filter-xray) !important;
14013
- }
14014
- /* 야간 투시경 효과 - Variables 사용 */
14015
- .filter\:night-vision {
14016
- filter: var(--filter-night-vision) !important;
14017
- }
14018
- /* 오래된 TV 효과 - Variables 사용 */
14019
- .filter\:old-tv {
14020
- filter: var(--filter-old-tv) !important;
14021
- }
14022
- /* ===== HOVER 필터 효과 ===== */
14023
- .hover\:filter\:grayscale\(0\):hover {
14024
- filter: grayscale(0) !important;
14025
- }
14026
- .hover\:filter\:grayscale\(1\):hover {
14027
- filter: grayscale(1) !important;
14028
- }
14029
- .hover\:filter\:sepia\(1\):hover {
14030
- filter: sepia(1) !important;
14031
- }
14032
- .hover\:filter\:brightness\(1\.2\):hover {
14033
- filter: brightness(1.2) !important;
14034
- }
14035
- .hover\:filter\:saturate\(1\.5\):hover {
14036
- filter: saturate(1.5) !important;
14037
- }
14038
- .hover\:filter\:blur\(0\):hover {
14039
- filter: blur(0) !important;
14040
- }
14041
- .hover\:filter\:hue-rotate\(90deg\):hover {
14042
- filter: hue-rotate(90deg) !important;
14043
- }
14044
- /* 복합 hover 효과 - Variables 사용 */
14045
- .hover\:filter\:vibrant:hover {
14046
- filter: var(--filter-vibrant) !important;
14047
- }
14048
- .hover\:filter\:glow-main:hover {
14049
- filter: var(--filter-glow-main) !important;
14050
- }
14051
- /* ===== RESPONSIVE FILTERS ===== */
14052
- /* Small screens (640px+) */
14053
- @media (min-width: 640px) {
14054
- .sm\:filter\:grayscale\(1\) {
14055
- filter: grayscale(1) !important;
14056
- }
14057
- .sm\:filter\:sepia\(1\) {
14058
- filter: sepia(1) !important;
14059
- }
14060
- .sm\:filter\:blur\(2px\) {
14061
- filter: blur(2px) !important;
14062
- }
14063
- .sm\:drop-shadow\:lg {
14064
- filter: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) !important;
14065
- }
14066
- .sm\:blend\:multiply {
14067
- mix-blend-mode: multiply !important;
14068
- }
14069
- }
14070
- /* Medium screens (768px+) */
14071
- @media (min-width: 768px) {
14072
- .md\:filter\:grayscale\(1\) {
14073
- filter: grayscale(1) !important;
14074
- }
14075
- .md\:filter\:sepia\(1\) {
14076
- filter: sepia(1) !important;
14077
- }
14078
- .md\:filter\:blur\(2px\) {
14079
- filter: blur(2px) !important;
14080
- }
14081
- .md\:drop-shadow\:lg {
14082
- filter: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) !important;
14083
- }
14084
- .md\:blend\:multiply {
14085
- mix-blend-mode: multiply !important;
14086
- }
14087
- }
14088
- /* Large screens (1024px+) */
14089
- @media (min-width: 1024px) {
14090
- .lg\:filter\:grayscale\(1\) {
14091
- filter: grayscale(1) !important;
14092
- }
14093
- .lg\:filter\:sepia\(1\) {
14094
- filter: sepia(1) !important;
14095
- }
14096
- .lg\:filter\:blur\(2px\) {
14097
- filter: blur(2px) !important;
14098
- }
14099
- .lg\:drop-shadow\:lg {
14100
- filter: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) !important;
14101
- }
14102
- .lg\:blend\:multiply {
14103
- mix-blend-mode: multiply !important;
14104
- }
14105
- }
14106
- /* Extra large screens (1280px+) */
14107
- @media (min-width: 1280px) {
14108
- .xl\:filter\:grayscale\(1\) {
14109
- filter: grayscale(1) !important;
14110
- }
14111
- .xl\:filter\:sepia\(1\) {
14112
- filter: sepia(1) !important;
14113
- }
14114
- .xl\:filter\:blur\(2px\) {
14115
- filter: blur(2px) !important;
14116
- }
14117
- .xl\:drop-shadow\:lg {
14118
- filter: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) !important;
14119
- }
14120
- .xl\:blend\:multiply {
14121
- mix-blend-mode: multiply !important;
14122
- }
14123
- }
14124
10970
  /* ===== MODERN CSS (현대적 CSS) ===== */
14125
10971
  /* ===== CONTAINER QUERIES UTILITIES ===== */
14126
10972
  /* CSS 속성명과 값을 그대로 유지하는 NewTil CSS 철학 */
@@ -15149,433 +11995,33 @@ Variables 커스터마이징:
15149
11995
  }
15150
11996
  /* ===== BROWSER SUPPORT & PERFORMANCE ===== */
15151
11997
  /* 스크롤 성능 최적화 */
15152
- .scroll-optimized {
15153
- -webkit-overflow-scrolling: touch !important; /* iOS 부드러운 스크롤 */
15154
- overscroll-behavior: contain !important; /* 스크롤 체이닝 방지 */
15155
- }
15156
- /* 저전력 모드에서 스크롤 효과 비활성화 */
15157
- @media (prefers-reduced-motion: reduce) {
15158
- .scroll-gallery,
15159
- .scroll-sections,
15160
- .card-slider,
15161
- .image-carousel {
15162
- scroll-snap-type: none !important;
15163
- scroll-behavior: auto !important;
15164
- }
15165
- }
15166
- /* 터치 디바이스 최적화 */
15167
- @media (hover: none) and (pointer: coarse) {
15168
- .scroll-gallery,
15169
- .card-slider {
15170
- gap: var(--space-2) !important; /* 모바일에서 간격 줄임 */
15171
- padding: var(--space-2) !important;
15172
- }
15173
-
15174
- .card-slider > .card {
15175
- width: 260px !important; /* 모바일에서 카드 크기 조정 */
15176
- }
15177
- }
15178
- /* ===== ACCESSIBILITY (접근성) ===== */
15179
- /* ===== SCREEN READER UTILITIES ===== */
15180
- /* CSS 속성명과 값을 그대로 유지하는 NewTil CSS 철학 */
15181
- /* 스크린 리더 접근성: 시각적으로 숨기기, 스크린 리더 전용 텍스트 등 */
15182
- /* ===== VISUALLY HIDDEN (시각적으로 숨기기) ===== */
15183
- /* 스크린 리더에서는 읽히지만 시각적으로는 숨김 */
15184
- .visually-hidden,
15185
- .sr-only {
15186
- position: absolute !important;
15187
- width: 1px !important;
15188
- height: 1px !important;
15189
- padding: 0 !important;
15190
- margin: -1px !important;
15191
- overflow: hidden !important;
15192
- clip: rect(0, 0, 0, 0) !important;
15193
- white-space: nowrap !important;
15194
- border: 0 !important;
15195
- }
15196
- /* 포커스될 때만 보이는 숨김 요소 */
15197
- .visually-hidden-focusable,
15198
- .sr-only-focusable {
15199
- position: absolute !important;
15200
- width: 1px !important;
15201
- height: 1px !important;
15202
- padding: 0 !important;
15203
- margin: -1px !important;
15204
- overflow: hidden !important;
15205
- clip: rect(0, 0, 0, 0) !important;
15206
- white-space: nowrap !important;
15207
- border: 0 !important;
15208
- }
15209
- .visually-hidden-focusable:focus,
15210
- .sr-only-focusable:focus {
15211
- position: static !important;
15212
- width: auto !important;
15213
- height: auto !important;
15214
- padding: var(--space-2) var(--space-4) !important;
15215
- margin: 0 !important;
15216
- overflow: visible !important;
15217
- clip: auto !important;
15218
- white-space: normal !important;
15219
- background-color: var(--color-main-1) !important;
15220
- color: var(--color-white) !important;
15221
- border-radius: var(--radius-sm) !important;
15222
- box-shadow: var(--shadow-lg) !important;
15223
- z-index: var(--z-index-tooltip) !important;
15224
- }
15225
- /* ===== SCREEN READER ONLY TEXT (스크린 리더 전용 텍스트) ===== */
15226
- /* 아이콘에 대한 설명 텍스트 */
15227
- .icon-description,
15228
- .sr-description {
15229
- position: absolute !important;
15230
- width: 1px !important;
15231
- height: 1px !important;
15232
- padding: 0 !important;
15233
- margin: -1px !important;
15234
- overflow: hidden !important;
15235
- clip: rect(0, 0, 0, 0) !important;
15236
- white-space: nowrap !important;
15237
- border: 0 !important;
15238
- }
15239
- /* 링크에 대한 추가 설명 */
15240
- .link-description,
15241
- .sr-link-text {
15242
- position: absolute !important;
15243
- width: 1px !important;
15244
- height: 1px !important;
15245
- padding: 0 !important;
15246
- margin: -1px !important;
15247
- overflow: hidden !important;
15248
- clip: rect(0, 0, 0, 0) !important;
15249
- white-space: nowrap !important;
15250
- border: 0 !important;
15251
- }
15252
- /* ===== ARIA ATTRIBUTES SUPPORT (ARIA 속성 지원) ===== */
15253
- /* aria-hidden="true" 요소 스타일링 */
15254
- [aria-hidden="true"] {
15255
- display: none !important;
15256
- }
15257
- /* aria-expanded 상태 표시 */
15258
- [aria-expanded="false"] .collapse-icon {
15259
- transform: rotate(0deg) !important;
15260
- transition: transform var(--duration-fast) var(--ease-out) !important;
15261
- }
15262
- [aria-expanded="true"] .collapse-icon {
15263
- transform: rotate(180deg) !important;
15264
- transition: transform var(--duration-fast) var(--ease-out) !important;
15265
- }
15266
- /* aria-disabled 상태 스타일링 */
15267
- [aria-disabled="true"] {
15268
- opacity: var(--opacity-50) !important;
15269
- cursor: not-allowed !important;
15270
- pointer-events: none !important;
15271
- }
15272
- /* aria-selected 상태 스타일링 */
15273
- [aria-selected="true"] {
15274
- background-color: var(--color-main-1) !important;
15275
- color: var(--color-white) !important;
15276
- }
15277
- [aria-selected="false"] {
15278
- background-color: transparent !important;
15279
- color: var(--color-base-7) !important;
15280
- }
15281
- /* aria-current 상태 스타일링 */
15282
- [aria-current="page"],
15283
- [aria-current="step"],
15284
- [aria-current="location"] {
15285
- background-color: var(--color-accent-1) !important;
15286
- color: var(--color-white) !important;
15287
- font-weight: var(--font-weight-semibold) !important;
15288
- }
15289
- /* ===== SKIP LINKS (스킵 링크) ===== */
15290
- /* 메인 컨텐츠로 건너뛰기 링크 */
15291
- .skip-link {
15292
- position: absolute !important;
15293
- top: -40px !important;
15294
- left: var(--space-4) !important;
15295
- background: var(--color-base-9) !important;
15296
- color: var(--color-white) !important;
15297
- padding: var(--space-2) var(--space-4) !important;
15298
- text-decoration: none !important;
15299
- border-radius: var(--radius-sm) !important;
15300
- z-index: var(--z-index-tooltip) !important;
15301
- transition: top var(--duration-fast) var(--ease-out) !important;
15302
- }
15303
- .skip-link:focus {
15304
- top: var(--space-4) !important;
15305
- }
15306
- /* 네비게이션 스킵 링크들 */
15307
- .skip-links {
15308
- position: absolute !important;
15309
- top: 0 !important;
15310
- left: 0 !important;
15311
- z-index: var(--z-index-modal) !important;
15312
- }
15313
- .skip-links a {
15314
- position: absolute !important;
15315
- top: -40px !important;
15316
- left: var(--space-4) !important;
15317
- background: var(--color-base-9) !important;
15318
- color: var(--color-white) !important;
15319
- padding: var(--space-2) var(--space-4) !important;
15320
- text-decoration: none !important;
15321
- border-radius: var(--radius-sm) !important;
15322
- transition: top var(--duration-fast) var(--ease-out) !important;
15323
- margin-right: var(--space-2) !important;
15324
- }
15325
- .skip-links a:focus {
15326
- top: var(--space-4) !important;
15327
- }
15328
- /* ===== LANDMARK REGIONS (랜드마크 영역) ===== */
15329
- /* 메인 컨텐츠 영역 표시 */
15330
- main[role="main"],
15331
- [role="main"],
15332
- .main-content {
15333
- scroll-margin-top: var(
15334
- --space-20
15335
- ) !important; /* 고정 헤더를 위한 스크롤 마진 */
15336
- }
15337
- /* 네비게이션 영역 */
15338
- nav[role="navigation"],
15339
- [role="navigation"],
15340
- .navigation {
15341
- position: relative !important;
15342
- }
15343
- /* 배너 영역 (헤더) */
15344
- header[role="banner"],
15345
- [role="banner"],
15346
- .site-header {
15347
- position: relative !important;
15348
- }
15349
- /* 콘텐츠 정보 영역 (푸터) */
15350
- footer[role="contentinfo"],
15351
- [role="contentinfo"],
15352
- .site-footer {
15353
- position: relative !important;
15354
- }
15355
- /* 보완 영역 (사이드바) */
15356
- aside[role="complementary"],
15357
- [role="complementary"],
15358
- .sidebar {
15359
- position: relative !important;
15360
- }
15361
- /* ===== FORM ACCESSIBILITY (폼 접근성) ===== */
15362
- /* 필수 입력 필드 표시 */
15363
- [aria-required="true"],
15364
- [required] {
15365
- position: relative !important;
15366
- }
15367
- [aria-required="true"]::after,
15368
- [required]::after {
15369
- content: " *" !important;
15370
- color: var(--color-danger-1) !important;
15371
- font-weight: var(--font-weight-bold) !important;
15372
- }
15373
- /* 에러 상태 표시 */
15374
- [aria-invalid="true"] {
15375
- border-color: var(--color-danger-1) !important;
15376
- box-shadow: 0 0 0 2px rgba(var(--rgb-danger-1), 0.2) !important;
15377
- }
15378
- /* 에러 메시지 스타일링 */
15379
- .error-message,
15380
- [role="alert"],
15381
- .alert-error {
15382
- color: var(--color-danger-1) !important;
15383
- background-color: rgba(var(--rgb-danger-1), 0.1) !important;
15384
- border: 1px solid var(--color-danger-1) !important;
15385
- border-radius: var(--radius-sm) !important;
15386
- padding: var(--space-2) var(--space-3) !important;
15387
- margin-top: var(--space-1) !important;
15388
- font-size: var(--font-size-sm) !important;
15389
- }
15390
- /* 성공 메시지 스타일링 */
15391
- .success-message,
15392
- .alert-success {
15393
- color: var(--color-success-1) !important;
15394
- background-color: rgba(var(--rgb-success-1), 0.1) !important;
15395
- border: 1px solid var(--color-success-1) !important;
15396
- border-radius: var(--radius-sm) !important;
15397
- padding: var(--space-2) var(--space-3) !important;
15398
- margin-top: var(--space-1) !important;
15399
- font-size: var(--font-size-sm) !important;
15400
- }
15401
- /* 경고 메시지 스타일링 */
15402
- .warning-message,
15403
- .alert-warning {
15404
- color: var(--color-warning-1) !important;
15405
- background-color: rgba(var(--rgb-warning-1), 0.1) !important;
15406
- border: 1px solid var(--color-warning-1) !important;
15407
- border-radius: var(--radius-sm) !important;
15408
- padding: var(--space-2) var(--space-3) !important;
15409
- margin-top: var(--space-1) !important;
15410
- font-size: var(--font-size-sm) !important;
15411
- }
15412
- /* ===== KEYBOARD NAVIGATION (키보드 네비게이션) ===== */
15413
- /* 키보드 포커스 표시자 */
15414
- .keyboard-focusable {
15415
- outline: 2px solid transparent !important;
15416
- outline-offset: 2px !important;
15417
- transition: outline-color var(--duration-fast) var(--ease-out) !important;
15418
- }
15419
- .keyboard-focusable:focus-visible {
15420
- outline-color: var(--color-main-1) !important;
15421
- }
15422
- /* 탭 순서 건너뛰기 */
15423
- .skip-tab-order {
15424
- position: absolute !important;
15425
- left: -10000px !important;
15426
- top: auto !important;
15427
- width: 1px !important;
15428
- height: 1px !important;
15429
- overflow: hidden !important;
15430
- }
15431
- /* ===== READING ORDER (읽기 순서) ===== */
15432
- /* 스크린 리더 읽기 순서 조정 */
15433
- .reading-order-1 {
15434
- order: 1 !important;
15435
- }
15436
- .reading-order-2 {
15437
- order: 2 !important;
15438
- }
15439
- .reading-order-3 {
15440
- order: 3 !important;
15441
- }
15442
- .reading-order-4 {
15443
- order: 4 !important;
15444
- }
15445
- .reading-order-5 {
15446
- order: 5 !important;
15447
- }
15448
- /* ===== SCREEN READER ANNOUNCEMENTS (스크린 리더 안내) ===== */
15449
- /* 라이브 영역 설정 */
15450
- .live-region-polite,
15451
- [aria-live="polite"] {
15452
- position: relative !important;
15453
- }
15454
- .live-region-assertive,
15455
- [aria-live="assertive"] {
15456
- position: relative !important;
15457
- }
15458
- .live-region-off,
15459
- [aria-live="off"] {
15460
- position: relative !important;
15461
- }
15462
- /* 상태 안내 메시지 */
15463
- .status-message {
15464
- position: absolute !important;
15465
- width: 1px !important;
15466
- height: 1px !important;
15467
- padding: 0 !important;
15468
- margin: -1px !important;
15469
- overflow: hidden !important;
15470
- clip: rect(0, 0, 0, 0) !important;
15471
- white-space: nowrap !important;
15472
- border: 0 !important;
15473
- }
15474
- /* ===== TABLE ACCESSIBILITY (테이블 접근성) ===== */
15475
- /* 테이블 캡션 스타일링 */
15476
- .table-caption,
15477
- caption {
15478
- text-align: left !important;
15479
- padding: var(--space-2) var(--space-4) !important;
15480
- font-weight: var(--font-weight-semibold) !important;
15481
- background-color: var(--color-base-1) !important;
15482
- border-bottom: 1px solid var(--color-base-3) !important;
15483
- }
15484
- /* 테이블 헤더 강조 */
15485
- .table-header,
15486
- th {
15487
- background-color: var(--color-base-2) !important;
15488
- font-weight: var(--font-weight-semibold) !important;
15489
- text-align: left !important;
15490
- padding: var(--space-3) var(--space-4) !important;
15491
- border-bottom: 2px solid var(--color-base-4) !important;
15492
- }
15493
- /* 데이터 셀 스타일링 */
15494
- .table-cell,
15495
- td {
15496
- padding: var(--space-3) var(--space-4) !important;
15497
- border-bottom: 1px solid var(--color-base-3) !important;
15498
- vertical-align: top !important;
15499
- }
15500
- /* ===== RESPONSIVE ACCESSIBILITY ===== */
15501
- /* 모바일에서 스크린 리더 최적화 */
15502
- @media (max-width: 767px) {
15503
- .skip-link {
15504
- left: var(--space-2) !important;
15505
- padding: var(--space-3) var(--space-4) !important;
15506
- font-size: var(--font-size-base) !important;
15507
- }
15508
-
15509
- .visually-hidden-focusable:focus {
15510
- padding: var(--space-3) var(--space-4) !important;
15511
- font-size: var(--font-size-base) !important;
15512
- }
15513
- }
15514
- /* 큰 화면에서 스킵 링크 위치 조정 */
15515
- @media (min-width: 1024px) {
15516
- .skip-link {
15517
- left: var(--space-8) !important;
15518
- }
15519
-
15520
- .skip-links a {
15521
- left: var(--space-8) !important;
15522
- }
15523
- }
15524
- /* ===== MOTION SENSITIVITY (모션 민감도) ===== */
15525
- /* 모션 감소 선호도 존중 */
15526
- @media (prefers-reduced-motion: reduce) {
15527
- .visually-hidden-focusable,
15528
- .skip-link,
15529
- .skip-links a,
15530
- [aria-expanded] .collapse-icon {
15531
- transition: none !important;
15532
- animation: none !important;
15533
- }
15534
- }
15535
- /* ===== UTILITY COMBINATIONS ===== */
15536
- /* 접근 가능한 버튼 */
15537
- .accessible-button {
15538
- position: relative !important;
15539
- display: inline-flex !important;
15540
- align-items: center !important;
15541
- justify-content: center !important;
15542
- padding: var(--space-2) var(--space-4) !important;
15543
- background-color: var(--color-main-1) !important;
15544
- color: var(--color-white) !important;
15545
- border: none !important;
15546
- border-radius: var(--radius-sm) !important;
15547
- cursor: pointer !important;
15548
- outline: 2px solid transparent !important;
15549
- outline-offset: 2px !important;
15550
- transition: all var(--duration-fast) var(--ease-out) !important;
15551
- }
15552
- .accessible-button:focus-visible {
15553
- outline-color: var(--color-accent-1) !important;
15554
- }
15555
- .accessible-button:disabled {
15556
- opacity: var(--opacity-50) !important;
15557
- cursor: not-allowed !important;
15558
- pointer-events: none !important;
15559
- }
15560
- /* 접근 가능한 링크 */
15561
- .accessible-link {
15562
- color: var(--color-main-1) !important;
15563
- text-decoration: underline !important;
15564
- outline: 2px solid transparent !important;
15565
- outline-offset: 2px !important;
15566
- border-radius: var(--radius-xs) !important;
15567
- transition: all var(--duration-fast) var(--ease-out) !important;
11998
+ .scroll-optimized {
11999
+ -webkit-overflow-scrolling: touch !important; /* iOS 부드러운 스크롤 */
12000
+ overscroll-behavior: contain !important; /* 스크롤 체이닝 방지 */
15568
12001
  }
15569
- .accessible-link:hover {
15570
- color: var(--color-main-2) !important;
15571
- text-decoration-thickness: 2px !important;
12002
+ /* 저전력 모드에서 스크롤 효과 비활성화 */
12003
+ @media (prefers-reduced-motion: reduce) {
12004
+ .scroll-gallery,
12005
+ .scroll-sections,
12006
+ .card-slider,
12007
+ .image-carousel {
12008
+ scroll-snap-type: none !important;
12009
+ scroll-behavior: auto !important;
12010
+ }
15572
12011
  }
15573
- .accessible-link:focus-visible {
15574
- outline-color: var(--color-main-1) !important;
15575
- background-color: rgba(var(--rgb-main-1), 0.1) !important;
15576
- padding: 2px 4px !important;
15577
- margin: -2px -4px !important;
12012
+ /* 터치 디바이스 최적화 */
12013
+ @media (hover: none) and (pointer: coarse) {
12014
+ .scroll-gallery,
12015
+ .card-slider {
12016
+ gap: var(--space-2) !important; /* 모바일에서 간격 줄임 */
12017
+ padding: var(--space-2) !important;
12018
+ }
12019
+
12020
+ .card-slider > .card {
12021
+ width: 260px !important; /* 모바일에서 카드 크기 조정 */
12022
+ }
15578
12023
  }
12024
+ /* ===== ACCESSIBILITY (접근성) ===== */
15579
12025
  /* ===== FOCUS UTILITIES ===== */
15580
12026
  /* CSS 속성명과 값을 그대로 유지하는 NewTil CSS 철학 */
15581
12027
  /* 포커스 관리: outline, focus-visible, focus-within 등 */
@@ -15909,511 +12355,81 @@ td {
15909
12355
  outline-width: 2px;
15910
12356
  }
15911
12357
  50% {
15912
- outline-color: var(--color-main-2);
15913
- outline-width: 3px;
15914
- }
15915
- }
15916
- /* ===== FOCUS MANAGEMENT (포커스 관리) ===== */
15917
- /* 자동 포커스 */
15918
- .auto-focus {
15919
- outline: 2px solid var(--color-main-1) !important;
15920
- outline-offset: 2px !important;
15921
- }
15922
- /* 포커스 방지 */
15923
- .no-focus {
15924
- outline: none !important;
15925
- -webkit-tap-highlight-color: transparent !important;
15926
- }
15927
- .no-focus:focus,
15928
- .no-focus:focus-visible {
15929
- outline: none !important;
15930
- box-shadow: none !important;
15931
- }
15932
- /* 키보드 전용 포커스 */
15933
- .keyboard-only-focus {
15934
- outline: none !important;
15935
- }
15936
- .keyboard-only-focus:focus:not(:focus-visible) {
15937
- outline: none !important;
15938
- box-shadow: none !important;
15939
- }
15940
- .keyboard-only-focus:focus-visible {
15941
- outline: 2px solid var(--color-main-1) !important;
15942
- outline-offset: 2px !important;
15943
- }
15944
- /* ===== RESPONSIVE FOCUS ===== */
15945
- /* 모바일 포커스 최적화 */
15946
- @media (max-width: 767px) {
15947
- .focus-indicator,
15948
- .btn-focus,
15949
- .link-focus,
15950
- .input-focus {
15951
- outline-width: 3px !important;
15952
- outline-offset: 3px !important;
15953
- }
15954
- }
15955
- /* 터치 디바이스 포커스 */
15956
- @media (hover: none) and (pointer: coarse) {
15957
- .focus-indicator:focus-visible,
15958
- .btn-focus:focus-visible,
15959
- .link-focus:focus-visible {
15960
- outline-width: 3px !important;
15961
- outline-offset: 3px !important;
15962
- }
15963
- }
15964
- /* ===== MOTION SENSITIVITY (모션 민감도) ===== */
15965
- @media (prefers-reduced-motion: reduce) {
15966
- .focus-indicator,
15967
- .btn-focus,
15968
- .link-focus,
15969
- .input-focus,
15970
- .focus-glow,
15971
- .focus-pulse {
15972
- transition: none !important;
15973
- animation: none !important;
15974
- }
15975
- }
15976
- /* ===== HIGH CONTRAST MODE (고대비 모드) ===== */
15977
- @media (prefers-contrast: high) {
15978
- .focus-indicator:focus-visible,
15979
- .btn-focus:focus-visible,
15980
- .link-focus:focus-visible,
15981
- .input-focus:focus {
15982
- outline-width: 3px !important;
15983
- outline-color: var(--color-base-10) !important;
15984
- background-color: var(--color-yellow) !important;
15985
- color: var(--color-base-10) !important;
15986
- }
15987
- }
15988
- /* ===== HIGH CONTRAST UTILITIES ===== */
15989
- /* CSS 속성명과 값을 그대로 유지하는 NewTil CSS 철학 */
15990
- /* 고대비 접근성: 시각 장애인, 저시력자를 위한 고대비 스타일 */
15991
- /* ===== HIGH CONTRAST DETECTION (고대비 모드 감지) ===== */
15992
- /* 고대비 모드가 활성화된 경우에만 적용되는 스타일 */
15993
- @media (prefers-contrast: high) {
15994
- /* 기본 텍스트 대비 강화 */
15995
- .text-high-contrast,
15996
- .high-contrast-text {
15997
- color: var(--color-black) !important;
15998
- background-color: var(--color-white) !important;
15999
- border: 2px solid var(--color-black) !important;
16000
- }
16001
-
16002
- /* 링크 대비 강화 */
16003
- .link-high-contrast,
16004
- .high-contrast-link {
16005
- color: var(--color-blue) !important;
16006
- text-decoration: underline !important;
16007
- text-decoration-thickness: 2px !important;
16008
- background-color: var(--color-white) !important;
16009
- }
16010
-
16011
- .link-high-contrast:hover,
16012
- .high-contrast-link:hover {
16013
- color: var(--color-white) !important;
16014
- background-color: var(--color-blue) !important;
16015
- outline: 2px solid var(--color-black) !important;
16016
- }
16017
-
16018
- /* 버튼 대비 강화 */
16019
- .btn-high-contrast,
16020
- .high-contrast-btn {
16021
- color: var(--color-white) !important;
16022
- background-color: var(--color-black) !important;
16023
- border: 3px solid var(--color-black) !important;
16024
- }
16025
-
16026
- .btn-high-contrast:hover,
16027
- .high-contrast-btn:hover {
16028
- color: var(--color-black) !important;
16029
- background-color: var(--color-yellow) !important;
16030
- border-color: var(--color-black) !important;
16031
- }
16032
- }
16033
- /* ===== MANUAL HIGH CONTRAST CLASSES (수동 고대비 클래스) ===== */
16034
- /* 고대비 모드와 관계없이 항상 적용되는 고대비 스타일 */
16035
- /* 흑백 고대비 */
16036
- .contrast-black-white {
16037
- color: var(--color-black) !important;
16038
- background-color: var(--color-white) !important;
16039
- border: 2px solid var(--color-black) !important;
16040
- }
16041
- .contrast-white-black {
16042
- color: var(--color-white) !important;
16043
- background-color: var(--color-black) !important;
16044
- border: 2px solid var(--color-white) !important;
16045
- }
16046
- /* 황색 강조 고대비 */
16047
- .contrast-black-yellow {
16048
- color: var(--color-black) !important;
16049
- background-color: var(--color-yellow) !important;
16050
- border: 2px solid var(--color-black) !important;
16051
- }
16052
- .contrast-yellow-black {
16053
- color: var(--color-yellow) !important;
16054
- background-color: var(--color-black) !important;
16055
- border: 2px solid var(--color-yellow) !important;
16056
- }
16057
- /* 파란색 강조 고대비 */
16058
- .contrast-white-blue {
16059
- color: var(--color-white) !important;
16060
- background-color: var(--color-blue) !important;
16061
- border: 2px solid var(--color-white) !important;
16062
- }
16063
- .contrast-blue-white {
16064
- color: var(--color-blue) !important;
16065
- background-color: var(--color-white) !important;
16066
- border: 2px solid var(--color-blue) !important;
16067
- }
16068
- /* ===== TEXT CONTRAST (텍스트 대비) ===== */
16069
- /* 텍스트 크기 확대 + 고대비 */
16070
- .text-large-contrast {
16071
- font-size: 1.25rem !important;
16072
- font-weight: var(--font-weight-bold) !important;
16073
- color: var(--color-black) !important;
16074
- background-color: var(--color-white) !important;
16075
- padding: var(--space-1) var(--space-2) !important;
16076
- border-radius: var(--radius-xs) !important;
16077
- }
16078
- /* 헤딩 고대비 */
16079
- .heading-high-contrast {
16080
- color: var(--color-black) !important;
16081
- background-color: var(--color-yellow) !important;
16082
- padding: var(--space-2) var(--space-4) !important;
16083
- border: 3px solid var(--color-black) !important;
16084
- border-radius: var(--radius-sm) !important;
16085
- font-weight: var(--font-weight-black) !important;
16086
- }
16087
- /* 중요 텍스트 강조 */
16088
- .text-emphasis-high {
16089
- color: var(--color-white) !important;
16090
- background-color: var(--color-red) !important;
16091
- padding: var(--space-1) var(--space-2) !important;
16092
- border: 2px solid var(--color-black) !important;
16093
- border-radius: var(--radius-xs) !important;
16094
- font-weight: var(--font-weight-bold) !important;
16095
- }
16096
- /* ===== BUTTON CONTRAST (버튼 대비) ===== */
16097
- /* 주요 버튼 고대비 */
16098
- .btn-primary-contrast {
16099
- color: var(--color-white) !important;
16100
- background-color: var(--color-black) !important;
16101
- border: 3px solid var(--color-black) !important;
16102
- padding: var(--space-3) var(--space-6) !important;
16103
- font-weight: var(--font-weight-bold) !important;
16104
- font-size: 1.125rem !important;
16105
- border-radius: var(--radius-sm) !important;
16106
- transition: all var(--duration-fast) var(--ease-out) !important;
16107
- }
16108
- .btn-primary-contrast:hover {
16109
- color: var(--color-black) !important;
16110
- background-color: var(--color-yellow) !important;
16111
- border-color: var(--color-black) !important;
16112
- transform: scale(1.05) !important;
16113
- }
16114
- .btn-primary-contrast:focus-visible {
16115
- outline: 4px solid var(--color-blue) !important;
16116
- outline-offset: 2px !important;
16117
- }
16118
- /* 보조 버튼 고대비 */
16119
- .btn-secondary-contrast {
16120
- color: var(--color-black) !important;
16121
- background-color: var(--color-white) !important;
16122
- border: 3px solid var(--color-black) !important;
16123
- padding: var(--space-3) var(--space-6) !important;
16124
- font-weight: var(--font-weight-bold) !important;
16125
- font-size: 1.125rem !important;
16126
- border-radius: var(--radius-sm) !important;
16127
- transition: all var(--duration-fast) var(--ease-out) !important;
16128
- }
16129
- .btn-secondary-contrast:hover {
16130
- color: var(--color-white) !important;
16131
- background-color: var(--color-black) !important;
16132
- border-color: var(--color-black) !important;
16133
- }
16134
- .btn-secondary-contrast:focus-visible {
16135
- outline: 4px solid var(--color-blue) !important;
16136
- outline-offset: 2px !important;
16137
- }
16138
- /* 위험 버튼 고대비 */
16139
- .btn-danger-contrast {
16140
- color: var(--color-white) !important;
16141
- background-color: var(--color-red) !important;
16142
- border: 3px solid var(--color-black) !important;
16143
- padding: var(--space-3) var(--space-6) !important;
16144
- font-weight: var(--font-weight-bold) !important;
16145
- font-size: 1.125rem !important;
16146
- border-radius: var(--radius-sm) !important;
16147
- transition: all var(--duration-fast) var(--ease-out) !important;
16148
- }
16149
- .btn-danger-contrast:hover {
16150
- color: var(--color-red) !important;
16151
- background-color: var(--color-white) !important;
16152
- border-color: var(--color-red) !important;
16153
- }
16154
- .btn-danger-contrast:focus-visible {
16155
- outline: 4px solid var(--color-yellow) !important;
16156
- outline-offset: 2px !important;
16157
- }
16158
- /* ===== LINK CONTRAST (링크 대비) ===== */
16159
- /* 기본 링크 고대비 */
16160
- .link-contrast {
16161
- color: var(--color-blue) !important;
16162
- text-decoration: underline !important;
16163
- text-decoration-thickness: 2px !important;
16164
- text-underline-offset: 4px !important;
16165
- font-weight: var(--font-weight-semibold) !important;
16166
- background-color: transparent !important;
16167
- border-radius: var(--radius-xs) !important;
16168
- transition: all var(--duration-fast) var(--ease-out) !important;
16169
- }
16170
- .link-contrast:hover {
16171
- color: var(--color-white) !important;
16172
- background-color: var(--color-blue) !important;
16173
- padding: 2px 4px !important;
16174
- margin: -2px -4px !important;
16175
- text-decoration: none !important;
16176
- }
16177
- .link-contrast:focus-visible {
16178
- outline: 3px solid var(--color-yellow) !important;
16179
- outline-offset: 2px !important;
16180
- background-color: var(--color-blue) !important;
16181
- color: var(--color-white) !important;
16182
- }
16183
- /* 방문한 링크 고대비 */
16184
- .link-contrast:visited {
16185
- color: var(--color-purple) !important;
16186
- }
16187
- .link-contrast:visited:hover {
16188
- color: var(--color-white) !important;
16189
- background-color: var(--color-purple) !important;
16190
- }
16191
- /* ===== FORM CONTRAST (폼 대비) ===== */
16192
- /* 입력 필드 고대비 */
16193
- .input-contrast {
16194
- color: var(--color-black) !important;
16195
- background-color: var(--color-white) !important;
16196
- border: 3px solid var(--color-black) !important;
16197
- padding: var(--space-3) var(--space-4) !important;
16198
- font-size: 1.125rem !important;
16199
- font-weight: var(--font-weight-medium) !important;
16200
- border-radius: var(--radius-sm) !important;
16201
- transition: all var(--duration-fast) var(--ease-out) !important;
16202
- }
16203
- .input-contrast:focus {
16204
- outline: 3px solid var(--color-blue) !important;
16205
- outline-offset: 2px !important;
16206
- border-color: var(--color-blue) !important;
16207
- background-color: var(--color-yellow) !important;
16208
- }
16209
- .input-contrast::placeholder {
16210
- color: var(--color-base-6) !important;
16211
- font-weight: var(--font-weight-normal) !important;
16212
- }
16213
- /* 라벨 고대비 */
16214
- .label-contrast {
16215
- color: var(--color-black) !important;
16216
- font-weight: var(--font-weight-bold) !important;
16217
- font-size: 1.125rem !important;
16218
- background-color: var(--color-yellow) !important;
16219
- padding: var(--space-1) var(--space-2) !important;
16220
- border-radius: var(--radius-xs) !important;
16221
- border: 2px solid var(--color-black) !important;
16222
- }
16223
- /* 체크박스/라디오 고대비 */
16224
- .checkbox-contrast,
16225
- .radio-contrast {
16226
- width: 1.5rem !important;
16227
- height: 1.5rem !important;
16228
- border: 3px solid var(--color-black) !important;
16229
- background-color: var(--color-white) !important;
16230
- cursor: pointer !important;
16231
- }
16232
- .checkbox-contrast:checked,
16233
- .radio-contrast:checked {
16234
- background-color: var(--color-black) !important;
16235
- border-color: var(--color-black) !important;
16236
- }
16237
- .checkbox-contrast:focus-visible,
16238
- .radio-contrast:focus-visible {
16239
- outline: 3px solid var(--color-blue) !important;
16240
- outline-offset: 2px !important;
16241
- }
16242
- /* ===== TABLE CONTRAST (테이블 대비) ===== */
16243
- /* 테이블 헤더 고대비 */
16244
- .table-header-contrast {
16245
- color: var(--color-white) !important;
16246
- background-color: var(--color-black) !important;
16247
- border: 2px solid var(--color-black) !important;
16248
- padding: var(--space-3) var(--space-4) !important;
16249
- font-weight: var(--font-weight-bold) !important;
16250
- font-size: 1.125rem !important;
16251
- }
16252
- /* 테이블 셀 고대비 */
16253
- .table-cell-contrast {
16254
- color: var(--color-black) !important;
16255
- background-color: var(--color-white) !important;
16256
- border: 2px solid var(--color-black) !important;
16257
- padding: var(--space-3) var(--space-4) !important;
16258
- font-size: 1rem !important;
16259
- }
16260
- /* 교대로 나타나는 행 고대비 */
16261
- .table-row-contrast:nth-child(even) {
16262
- background-color: var(--color-base-1) !important;
16263
- }
16264
- .table-row-contrast:nth-child(odd) {
16265
- background-color: var(--color-white) !important;
16266
- }
16267
- /* ===== NAVIGATION CONTRAST (네비게이션 대비) ===== */
16268
- /* 네비게이션 메뉴 고대비 */
16269
- .nav-contrast {
16270
- background-color: var(--color-black) !important;
16271
- border: 3px solid var(--color-white) !important;
16272
- padding: var(--space-4) !important;
16273
- }
16274
- .nav-contrast a {
16275
- color: var(--color-white) !important;
16276
- text-decoration: none !important;
16277
- font-weight: var(--font-weight-bold) !important;
16278
- font-size: 1.125rem !important;
16279
- padding: var(--space-2) var(--space-4) !important;
16280
- border-radius: var(--radius-sm) !important;
16281
- border: 2px solid transparent !important;
16282
- transition: all var(--duration-fast) var(--ease-out) !important;
16283
- }
16284
- .nav-contrast a:hover {
16285
- color: var(--color-black) !important;
16286
- background-color: var(--color-yellow) !important;
16287
- border-color: var(--color-black) !important;
16288
- }
16289
- .nav-contrast a:focus-visible {
16290
- outline: 3px solid var(--color-blue) !important;
16291
- outline-offset: 2px !important;
16292
- }
16293
- .nav-contrast a[aria-current="page"] {
16294
- color: var(--color-black) !important;
16295
- background-color: var(--color-white) !important;
16296
- border-color: var(--color-black) !important;
16297
- }
16298
- /* ===== CARD CONTRAST (카드 대비) ===== */
16299
- /* 카드 고대비 */
16300
- .card-contrast {
16301
- color: var(--color-black) !important;
16302
- background-color: var(--color-white) !important;
16303
- border: 4px solid var(--color-black) !important;
16304
- border-radius: var(--radius-md) !important;
16305
- padding: var(--space-6) !important;
16306
- box-shadow: 4px 4px 0 var(--color-black) !important;
12358
+ outline-color: var(--color-main-2);
12359
+ outline-width: 3px;
12360
+ }
16307
12361
  }
16308
- .card-contrast:hover {
16309
- transform: translate(-2px, -2px) !important;
16310
- box-shadow: 6px 6px 0 var(--color-black) !important;
12362
+ /* ===== FOCUS MANAGEMENT (포커스 관리) ===== */
12363
+ /* 자동 포커스 */
12364
+ .auto-focus {
12365
+ outline: 2px solid var(--color-main-1) !important;
12366
+ outline-offset: 2px !important;
16311
12367
  }
16312
- /* 카드 헤더 고대비 */
16313
- .card-header-contrast {
16314
- color: var(--color-white) !important;
16315
- background-color: var(--color-black) !important;
16316
- padding: var(--space-4) var(--space-6) !important;
16317
- margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6))
16318
- var(--space-4) calc(-1 * var(--space-6)) !important;
16319
- border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
16320
- font-weight: var(--font-weight-bold) !important;
16321
- font-size: 1.25rem !important;
12368
+ /* 포커스 방지 */
12369
+ .no-focus {
12370
+ outline: none !important;
12371
+ -webkit-tap-highlight-color: transparent !important;
16322
12372
  }
16323
- /* ===== ALERT CONTRAST (알림 대비) ===== */
16324
- /* 성공 알림 고대비 */
16325
- .alert-success-contrast {
16326
- color: var(--color-black) !important;
16327
- background-color: var(--color-green) !important;
16328
- border: 3px solid var(--color-black) !important;
16329
- padding: var(--space-4) var(--space-6) !important;
16330
- border-radius: var(--radius-md) !important;
16331
- font-weight: var(--font-weight-bold) !important;
16332
- font-size: 1.125rem !important;
12373
+ .no-focus:focus,
12374
+ .no-focus:focus-visible {
12375
+ outline: none !important;
12376
+ box-shadow: none !important;
16333
12377
  }
16334
- /* 경고 알림 고대비 */
16335
- .alert-warning-contrast {
16336
- color: var(--color-black) !important;
16337
- background-color: var(--color-yellow) !important;
16338
- border: 3px solid var(--color-black) !important;
16339
- padding: var(--space-4) var(--space-6) !important;
16340
- border-radius: var(--radius-md) !important;
16341
- font-weight: var(--font-weight-bold) !important;
16342
- font-size: 1.125rem !important;
12378
+ /* 키보드 전용 포커스 */
12379
+ .keyboard-only-focus {
12380
+ outline: none !important;
16343
12381
  }
16344
- /* 오류 알림 고대비 */
16345
- .alert-error-contrast {
16346
- color: var(--color-white) !important;
16347
- background-color: var(--color-red) !important;
16348
- border: 3px solid var(--color-black) !important;
16349
- padding: var(--space-4) var(--space-6) !important;
16350
- border-radius: var(--radius-md) !important;
16351
- font-weight: var(--font-weight-bold) !important;
16352
- font-size: 1.125rem !important;
12382
+ .keyboard-only-focus:focus:not(:focus-visible) {
12383
+ outline: none !important;
12384
+ box-shadow: none !important;
16353
12385
  }
16354
- /* 정보 알림 고대비 */
16355
- .alert-info-contrast {
16356
- color: var(--color-white) !important;
16357
- background-color: var(--color-blue) !important;
16358
- border: 3px solid var(--color-black) !important;
16359
- padding: var(--space-4) var(--space-6) !important;
16360
- border-radius: var(--radius-md) !important;
16361
- font-weight: var(--font-weight-bold) !important;
16362
- font-size: 1.125rem !important;
12386
+ .keyboard-only-focus:focus-visible {
12387
+ outline: 2px solid var(--color-main-1) !important;
12388
+ outline-offset: 2px !important;
16363
12389
  }
16364
- /* ===== RESPONSIVE HIGH CONTRAST ===== */
16365
- /* 모바일에서 고대비 최적화 */
12390
+ /* ===== RESPONSIVE FOCUS ===== */
12391
+ /* 모바일 포커스 최적화 */
16366
12392
  @media (max-width: 767px) {
16367
- .btn-primary-contrast,
16368
- .btn-secondary-contrast,
16369
- .btn-danger-contrast {
16370
- font-size: 1.25rem !important;
16371
- padding: var(--space-4) var(--space-8) !important;
16372
- border-width: 4px !important;
16373
- }
16374
-
16375
- .input-contrast {
16376
- font-size: 1.25rem !important;
16377
- padding: var(--space-4) var(--space-5) !important;
16378
- border-width: 4px !important;
16379
- }
16380
-
16381
- .text-large-contrast {
16382
- font-size: 1.5rem !important;
12393
+ .focus-indicator,
12394
+ .btn-focus,
12395
+ .link-focus,
12396
+ .input-focus {
12397
+ outline-width: 3px !important;
12398
+ outline-offset: 3px !important;
16383
12399
  }
16384
12400
  }
16385
- /* 큰 화면에서 고대비 최적화 */
16386
- @media (min-width: 1024px) {
16387
- .heading-high-contrast {
16388
- font-size: 2rem !important;
16389
- padding: var(--space-4) var(--space-8) !important;
16390
- }
16391
-
16392
- .card-contrast {
16393
- padding: var(--space-8) !important;
16394
- border-width: 5px !important;
16395
- box-shadow: 6px 6px 0 var(--color-black) !important;
12401
+ /* 터치 디바이스 포커스 */
12402
+ @media (hover: none) and (pointer: coarse) {
12403
+ .focus-indicator:focus-visible,
12404
+ .btn-focus:focus-visible,
12405
+ .link-focus:focus-visible {
12406
+ outline-width: 3px !important;
12407
+ outline-offset: 3px !important;
16396
12408
  }
16397
12409
  }
16398
- /* ===== UTILITY COMBINATIONS ===== */
16399
- /* 완전한 고대비 페이지 래퍼 */
16400
- .high-contrast-page {
16401
- color: var(--color-black) !important;
16402
- background-color: var(--color-white) !important;
16403
- font-weight: var(--font-weight-medium) !important;
16404
- line-height: 1.6 !important;
16405
- }
16406
- .high-contrast-page * {
16407
- border-color: var(--color-black) !important;
12410
+ /* ===== MOTION SENSITIVITY (모션 민감도) ===== */
12411
+ @media (prefers-reduced-motion: reduce) {
12412
+ .focus-indicator,
12413
+ .btn-focus,
12414
+ .link-focus,
12415
+ .input-focus,
12416
+ .focus-glow,
12417
+ .focus-pulse {
12418
+ transition: none !important;
12419
+ animation: none !important;
12420
+ }
16408
12421
  }
16409
- /* 고대비 컨테이너 */
16410
- .high-contrast-container {
16411
- color: var(--color-black) !important;
16412
- background-color: var(--color-white) !important;
16413
- border: 3px solid var(--color-black) !important;
16414
- padding: var(--space-6) !important;
16415
- border-radius: var(--radius-lg) !important;
16416
- margin: var(--space-4) !important;
12422
+ /* ===== HIGH CONTRAST MODE (고대비 모드) ===== */
12423
+ @media (prefers-contrast: high) {
12424
+ .focus-indicator:focus-visible,
12425
+ .btn-focus:focus-visible,
12426
+ .link-focus:focus-visible,
12427
+ .input-focus:focus {
12428
+ outline-width: 3px !important;
12429
+ outline-color: var(--color-base-10) !important;
12430
+ background-color: var(--color-yellow) !important;
12431
+ color: var(--color-base-10) !important;
12432
+ }
16417
12433
  }
16418
12434
  /* ===== PRINT SUPPORT (프린트 지원) ===== */
16419
12435
  /* ===== PRINT UTILITIES ===== */
@@ -17037,472 +13053,6 @@ td {
17037
13053
  margin-bottom: 2pt !important;
17038
13054
  }
17039
13055
  }
17040
- /* ===== BROWSER COMPATIBILITY (브라우저 호환성) ===== */
17041
- /* ===== BROWSER COMPATIBILITY UTILITIES ===== */
17042
- /* CSS 속성명과 값을 그대로 유지하는 NewTil CSS 철학 */
17043
- /* 브라우저 호환성: vendor prefixes, feature detection, fallbacks 등 */
17044
- /* ===== VENDOR PREFIXES (벤더 프리픽스) ===== */
17045
- /* Transform 호환성 */
17046
- .transform-compat {
17047
- -webkit-transform: var(--transform, none) !important;
17048
- -moz-transform: var(--transform, none) !important;
17049
- -ms-transform: var(--transform, none) !important;
17050
- -o-transform: var(--transform, none) !important;
17051
- transform: var(--transform, none) !important;
17052
- }
17053
- /* Transition 호환성 */
17054
- .transition-compat {
17055
- -webkit-transition: var(--transition, all 0.3s ease) !important;
17056
- -moz-transition: var(--transition, all 0.3s ease) !important;
17057
- -ms-transition: var(--transition, all 0.3s ease) !important;
17058
- -o-transition: var(--transition, all 0.3s ease) !important;
17059
- transition: var(--transition, all 0.3s ease) !important;
17060
- }
17061
- /* Animation 호환성 */
17062
- .animation-compat {
17063
- -webkit-animation: var(--animation, none) !important;
17064
- -moz-animation: var(--animation, none) !important;
17065
- -ms-animation: var(--animation, none) !important;
17066
- -o-animation: var(--animation, none) !important;
17067
- animation: var(--animation, none) !important;
17068
- }
17069
- /* Box Shadow 호환성 */
17070
- .box-shadow-compat {
17071
- -webkit-box-shadow: var(--shadow, none) !important;
17072
- -moz-box-shadow: var(--shadow, none) !important;
17073
- box-shadow: var(--shadow, none) !important;
17074
- }
17075
- /* Border Radius 호환성 */
17076
- .border-radius-compat {
17077
- -webkit-border-radius: var(--radius, 0) !important;
17078
- -moz-border-radius: var(--radius, 0) !important;
17079
- border-radius: var(--radius, 0) !important;
17080
- }
17081
- /* Linear Gradient 호환성 */
17082
- .linear-gradient-compat {
17083
- background: var(--gradient-fallback, #ffffff) !important; /* 폴백 색상 */
17084
- background: -webkit-linear-gradient(
17085
- var(--gradient-direction, top),
17086
- var(--gradient-stops)
17087
- ) !important;
17088
- background: -moz-linear-gradient(
17089
- var(--gradient-direction, top),
17090
- var(--gradient-stops)
17091
- ) !important;
17092
- background: -ms-linear-gradient(
17093
- var(--gradient-direction, top),
17094
- var(--gradient-stops)
17095
- ) !important;
17096
- background: -o-linear-gradient(
17097
- var(--gradient-direction, top),
17098
- var(--gradient-stops)
17099
- ) !important;
17100
- background: linear-gradient(
17101
- var(--gradient-direction, to bottom),
17102
- var(--gradient-stops)
17103
- ) !important;
17104
- }
17105
- /* ===== FLEXBOX COMPATIBILITY (플렉스박스 호환성) ===== */
17106
- /* 구 버전 Flexbox 지원 */
17107
- .flex-compat {
17108
- display: -webkit-box !important; /* iOS 6-, Safari 3.1-6 */
17109
- display: -moz-box !important; /* Firefox 19- */
17110
- display: -ms-flexbox !important; /* IE 10 */
17111
- display: -webkit-flex !important; /* Chrome */
17112
- display: flex !important; /* 표준 */
17113
- }
17114
- .flex-direction-row-compat {
17115
- -webkit-box-orient: horizontal !important;
17116
- -webkit-box-direction: normal !important;
17117
- -webkit-flex-direction: row !important;
17118
- -ms-flex-direction: row !important;
17119
- flex-direction: row !important;
17120
- }
17121
- .flex-direction-column-compat {
17122
- -webkit-box-orient: vertical !important;
17123
- -webkit-box-direction: normal !important;
17124
- -webkit-flex-direction: column !important;
17125
- -ms-flex-direction: column !important;
17126
- flex-direction: column !important;
17127
- }
17128
- .justify-content-center-compat {
17129
- -webkit-box-pack: center !important;
17130
- -webkit-justify-content: center !important;
17131
- -ms-flex-pack: center !important;
17132
- justify-content: center !important;
17133
- }
17134
- .align-items-center-compat {
17135
- -webkit-box-align: center !important;
17136
- -webkit-align-items: center !important;
17137
- -ms-flex-align: center !important;
17138
- align-items: center !important;
17139
- }
17140
- .flex-1-compat {
17141
- -webkit-box-flex: 1 !important;
17142
- -webkit-flex: 1 !important;
17143
- -ms-flex: 1 !important;
17144
- flex: 1 !important;
17145
- }
17146
- /* ===== GRID COMPATIBILITY (그리드 호환성) ===== */
17147
- /* CSS Grid 호환성 */
17148
- .grid-compat {
17149
- display: -ms-grid !important; /* IE 10-11 */
17150
- display: grid !important; /* 표준 */
17151
- }
17152
- /* IE Grid 폴백 */
17153
- @supports not (display: grid) {
17154
- .grid-compat {
17155
- display: flex !important;
17156
- flex-wrap: wrap !important;
17157
- }
17158
-
17159
- .grid-compat > * {
17160
- flex: 1 !important;
17161
- min-width: 0 !important;
17162
- }
17163
- }
17164
- /* ===== USER SELECT COMPATIBILITY (사용자 선택 호환성) ===== */
17165
- .user-select-none-compat {
17166
- -webkit-user-select: none !important;
17167
- -moz-user-select: none !important;
17168
- -ms-user-select: none !important;
17169
- user-select: none !important;
17170
- }
17171
- .user-select-all-compat {
17172
- -webkit-user-select: all !important;
17173
- -moz-user-select: all !important;
17174
- -ms-user-select: all !important;
17175
- user-select: all !important;
17176
- }
17177
- .user-select-text-compat {
17178
- -webkit-user-select: text !important;
17179
- -moz-user-select: text !important;
17180
- -ms-user-select: text !important;
17181
- user-select: text !important;
17182
- }
17183
- /* ===== APPEARANCE COMPATIBILITY (외형 호환성) ===== */
17184
- .appearance-none-compat {
17185
- -webkit-appearance: none !important;
17186
- -moz-appearance: none !important;
17187
- -ms-appearance: none !important;
17188
- appearance: none !important;
17189
- }
17190
- /* ===== BACKDROP FILTER COMPATIBILITY (백드롭 필터 호환성) ===== */
17191
- .backdrop-filter-compat {
17192
- -webkit-backdrop-filter: var(--backdrop-filter, none) !important;
17193
- backdrop-filter: var(--backdrop-filter, none) !important;
17194
- }
17195
- /* 백드롭 필터 미지원 시 폴백 */
17196
- @supports not (backdrop-filter: blur(1px)) and not
17197
- (-webkit-backdrop-filter: blur(1px)) {
17198
- .backdrop-filter-fallback {
17199
- background-color: rgba(255, 255, 255, 0.8) !important;
17200
- }
17201
-
17202
- .backdrop-filter-fallback.dark {
17203
- background-color: rgba(0, 0, 0, 0.8) !important;
17204
- }
17205
- }
17206
- /* ===== STICKY POSITION COMPATIBILITY (스티키 포지션 호환성) ===== */
17207
- .sticky-compat {
17208
- position: -webkit-sticky !important;
17209
- position: sticky !important;
17210
- }
17211
- /* Sticky 미지원 시 폴백 */
17212
- @supports not (position: sticky) {
17213
- .sticky-fallback {
17214
- position: fixed !important;
17215
- top: 0 !important;
17216
- z-index: var(--z-index-fixed, 1000) !important;
17217
- }
17218
- }
17219
- /* ===== OBJECT FIT COMPATIBILITY (오브젝트 핏 호환성) ===== */
17220
- .object-fit-cover-compat {
17221
- object-fit: cover !important;
17222
- object-position: center !important;
17223
- }
17224
- /* Object-fit 미지원 시 폴백 */
17225
- @supports not (object-fit: cover) {
17226
- .object-fit-cover-fallback {
17227
- position: relative !important;
17228
- overflow: hidden !important;
17229
- }
17230
-
17231
- .object-fit-cover-fallback img {
17232
- position: absolute !important;
17233
- top: 50% !important;
17234
- left: 50% !important;
17235
- transform: translate(-50%, -50%) !important;
17236
- min-width: 100% !important;
17237
- min-height: 100% !important;
17238
- width: auto !important;
17239
- height: auto !important;
17240
- }
17241
- }
17242
- /* ===== ASPECT RATIO COMPATIBILITY (종횡비 호환성) ===== */
17243
- /* Aspect Ratio 호환성 (padding-top hack) */
17244
- @supports not (aspect-ratio: 1 / 1) {
17245
- .aspect-ratio-fallback {
17246
- position: relative !important;
17247
- overflow: hidden !important;
17248
- }
17249
-
17250
- .aspect-ratio-fallback::before {
17251
- content: "" !important;
17252
- display: block !important;
17253
- padding-top: var(--aspect-ratio-percent, 100%) !important;
17254
- }
17255
-
17256
- .aspect-ratio-fallback > * {
17257
- position: absolute !important;
17258
- top: 0 !important;
17259
- left: 0 !important;
17260
- width: 100% !important;
17261
- height: 100% !important;
17262
- }
17263
- }
17264
- /* ===== SCROLL BEHAVIOR COMPATIBILITY (스크롤 동작 호환성) ===== */
17265
- .scroll-smooth-compat {
17266
- scroll-behavior: smooth !important;
17267
- }
17268
- /* Smooth scroll 미지원 시 폴백 */
17269
- @supports not (scroll-behavior: smooth) {
17270
- .scroll-smooth-js {
17271
- /* JavaScript로 부드러운 스크롤 구현 필요 */
17272
- scroll-behavior: auto !important;
17273
- }
17274
- }
17275
- /* ===== CONTAINER QUERIES COMPATIBILITY (컨테이너 쿼리 호환성) ===== */
17276
- /* Container Queries 미지원 시 폴백 */
17277
- @supports not (container-type: inline-size) {
17278
- .container-fallback {
17279
- /* 미디어 쿼리로 대체 */
17280
- width: 100% !important;
17281
- }
17282
-
17283
- @media (min-width: 400px) {
17284
- .container-fallback {
17285
- /* 컨테이너 쿼리 대신 미디어 쿼리 사용 */
17286
- }
17287
- }
17288
- }
17289
- /* ===== CLAMP FUNCTION COMPATIBILITY (clamp 함수 호환성) ===== */
17290
- /* clamp() 미지원 시 폴백 */
17291
- @supports not (font-size: clamp(1rem, 4vw, 2rem)) {
17292
- .clamp-fallback {
17293
- font-size: 1.25rem !important; /* 중간값으로 폴백 */
17294
- }
17295
-
17296
- @media (min-width: 768px) {
17297
- .clamp-fallback {
17298
- font-size: 1.5rem !important;
17299
- }
17300
- }
17301
-
17302
- @media (min-width: 1200px) {
17303
- .clamp-fallback {
17304
- font-size: 2rem !important;
17305
- }
17306
- }
17307
- }
17308
- /* ===== CUSTOM PROPERTIES COMPATIBILITY (CSS 변수 호환성) ===== */
17309
- /* CSS Variables 미지원 시 폴백 */
17310
- @supports not (color: var(--primary-color)) {
17311
- .css-variables-fallback {
17312
- /* 하드코딩된 값으로 폴백 */
17313
- color: #007bff !important;
17314
- background-color: #ffffff !important;
17315
- border-color: #dee2e6 !important;
17316
- }
17317
- }
17318
- /* ===== INTERNET EXPLORER SPECIFIC (Internet Explorer 전용) ===== */
17319
- /* IE 조건부 클래스 */
17320
- .ie-only {
17321
- display: none !important;
17322
- }
17323
- /* IE에서만 표시 */
17324
- @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
17325
- .ie-only {
17326
- display: block !important;
17327
- }
17328
-
17329
- .ie-hide {
17330
- display: none !important;
17331
- }
17332
- }
17333
- /* IE 그리드 레이아웃 수정 */
17334
- @supports (-ms-grid-columns: 1fr) {
17335
- .ie-grid-fix {
17336
- -ms-grid-columns: 1fr !important;
17337
- -ms-grid-rows: auto !important;
17338
- }
17339
- }
17340
- /* ===== SAFARI SPECIFIC (Safari 전용) ===== */
17341
- /* Safari 버그 수정 */
17342
- @supports (-webkit-touch-callout: none) {
17343
- .safari-fix {
17344
- -webkit-transform: translateZ(0) !important; /* 하드웨어 가속 */
17345
- }
17346
- }
17347
- /* iOS Safari 뷰포트 높이 수정 */
17348
- @supports (-webkit-touch-callout: none) {
17349
- .ios-viewport-fix {
17350
- height: -webkit-fill-available !important;
17351
- }
17352
- }
17353
- /* ===== FIREFOX SPECIFIC (Firefox 전용) ===== */
17354
- /* Firefox 스크롤바 스타일링 */
17355
- @-moz-document url-prefix() {
17356
- .firefox-scrollbar {
17357
- scrollbar-width: thin !important;
17358
- scrollbar-color: var(--color-base-4) var(--color-base-1) !important;
17359
- }
17360
- }
17361
- /* ===== FEATURE DETECTION (기능 감지) ===== */
17362
- /* Hover 지원 감지 */
17363
- @media (hover: hover) {
17364
- .hover-supported:hover {
17365
- background-color: var(--color-base-2) !important;
17366
- transform: translateY(-2px) !important;
17367
- }
17368
- }
17369
- @media (hover: none) {
17370
- .hover-not-supported {
17371
- /* 터치 디바이스용 스타일 */
17372
- padding: var(--space-4) !important;
17373
- font-size: 1.125rem !important;
17374
- }
17375
- }
17376
- /* Pointer 정밀도 감지 */
17377
- @media (pointer: fine) {
17378
- .fine-pointer {
17379
- /* 마우스/트랙패드용 */
17380
- cursor: pointer !important;
17381
- }
17382
- }
17383
- @media (pointer: coarse) {
17384
- .coarse-pointer {
17385
- /* 터치용 */
17386
- min-height: 44px !important; /* 터치 최소 크기 */
17387
- min-width: 44px !important;
17388
- }
17389
- }
17390
- /* ===== REDUCED MOTION COMPATIBILITY (모션 감소 호환성) ===== */
17391
- /* 모션 감소 미지원 시 폴백 */
17392
- .motion-safe {
17393
- animation: var(--animation, none) !important;
17394
- transition: var(--transition, all 0.3s ease) !important;
17395
- }
17396
- @media (prefers-reduced-motion: reduce) {
17397
- .motion-safe {
17398
- animation: none !important;
17399
- transition: none !important;
17400
- }
17401
- }
17402
- /* ===== HIGH CONTRAST MODE COMPATIBILITY (고대비 모드 호환성) ===== */
17403
- /* Windows 고대비 모드 감지 */
17404
- @media (-ms-high-contrast: active) {
17405
- .high-contrast-mode {
17406
- border: 1px solid !important;
17407
- background: ButtonFace !important;
17408
- color: ButtonText !important;
17409
- }
17410
- }
17411
- /* ===== COLOR SCHEME COMPATIBILITY (색상 스킴 호환성) ===== */
17412
- /* 다크 모드 미지원 시 폴백 */
17413
- @media (prefers-color-scheme: dark) {
17414
- .dark-mode-supported {
17415
- background-color: var(--color-base-9) !important;
17416
- color: var(--color-white) !important;
17417
- }
17418
- }
17419
- /* 다크 모드 감지 불가능한 경우 */
17420
- @supports not (color-scheme: dark) {
17421
- .dark-mode-fallback {
17422
- /* JavaScript로 다크 모드 토글 구현 필요 */
17423
- }
17424
- }
17425
- /* ===== PRINT COMPATIBILITY (프린트 호환성) ===== */
17426
- /* 프린트 시 웹폰트 폴백 */
17427
- @media print {
17428
- .print-font-fallback {
17429
- font-family: "Times New Roman", serif !important;
17430
- }
17431
-
17432
- .print-safe {
17433
- color: black !important;
17434
- background: white !important;
17435
- text-shadow: none !important;
17436
- box-shadow: none !important;
17437
- }
17438
- }
17439
- /* ===== BROWSER DETECTION UTILITIES (브라우저 감지 유틸리티) ===== */
17440
- /* Chromium 기반 브라우저 감지 */
17441
- @supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
17442
- .chromium-only {
17443
- display: block !important;
17444
- }
17445
- }
17446
- /* WebKit 기반 브라우저 감지 */
17447
- @supports (-webkit-appearance: none) {
17448
- .webkit-only {
17449
- display: block !important;
17450
- }
17451
- }
17452
- /* Gecko 기반 브라우저 감지 */
17453
- @supports (-moz-appearance: none) {
17454
- .gecko-only {
17455
- display: block !important;
17456
- }
17457
- }
17458
- /* ===== PERFORMANCE OPTIMIZATION (성능 최적화) ===== */
17459
- /* GPU 가속 활성화 */
17460
- .gpu-accelerated {
17461
- -webkit-transform: translateZ(0) !important;
17462
- -moz-transform: translateZ(0) !important;
17463
- -ms-transform: translateZ(0) !important;
17464
- -o-transform: translateZ(0) !important;
17465
- transform: translateZ(0) !important;
17466
-
17467
- /* will-change 최적화 */
17468
- will-change: var(--will-change, auto) !important;
17469
- }
17470
- /* 하드웨어 가속 비활성화 */
17471
- .no-gpu-acceleration {
17472
- transform: none !important;
17473
- will-change: auto !important;
17474
- }
17475
- /* ===== POLYFILL HINTS (폴리필 힌트) ===== */
17476
- /* JavaScript 폴리필이 필요한 기능들 */
17477
- .needs-polyfill {
17478
- /*
17479
- 필요한 폴리필들:
17480
- - IntersectionObserver
17481
- - ResizeObserver
17482
- - CustomEvent
17483
- - Object.assign
17484
- - Array.from
17485
- - Promise
17486
- - fetch
17487
- */
17488
- }
17489
- /* 폴리필 로드 완료 후 활성화되는 클래스 */
17490
- .polyfill-loaded .feature-enhanced {
17491
- /* 폴리필 의존 기능들 */
17492
- }
17493
- /* ===== CRITICAL CSS OPTIMIZATION (중요 CSS 최적화) ===== */
17494
- /* Above the fold 콘텐츠 */
17495
- .critical-css {
17496
- /* 중요한 스타일만 포함 */
17497
- display: block !important;
17498
- position: relative !important;
17499
- margin: 0 !important;
17500
- padding: 0 !important;
17501
- }
17502
- /* 지연 로드 콘텐츠 */
17503
- .non-critical {
17504
- /* 나중에 로드될 스타일들 */
17505
- }
17506
13056
  /* ===== RESPONSIVE BREAKPOINTS ===== */
17507
13057
  /*
17508
13058
  미디어쿼리 브레이크포인트: