newtil-css 0.2.94 → 0.2.95

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 +0 -3154
  2. package/dist/utils.css +0 -4056
  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 철학 */