- 코드 정리

- 경고 클래스 수정
- 카드 비율 수정 3:4 > 4:5
This commit is contained in:
2026-02-10 11:30:45 +09:00
parent ddc491dec1
commit 526d310ac9
6 changed files with 263 additions and 116 deletions

View File

@@ -93,6 +93,8 @@
--text-3xl--line-height: calc(2.25 / 1.875);
--text-4xl: 2.25rem;
--text-4xl--line-height: calc(2.5 / 2.25);
--text-6xl: 3.75rem;
--text-6xl--line-height: 1;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
@@ -321,9 +323,6 @@
.z-50 {
z-index: 50;
}
.z-\[60\] {
z-index: 60;
}
.container {
width: 100%;
@media (width >= 40rem) {
@@ -345,8 +344,11 @@
.mx-auto {
margin-inline: auto;
}
.mt-4 {
margin-top: calc(var(--spacing) * 4);
.mt-2 {
margin-top: calc(var(--spacing) * 2);
}
.-mb-4 {
margin-bottom: calc(var(--spacing) * -4);
}
.mb-2 {
margin-bottom: calc(var(--spacing) * 2);
@@ -354,6 +356,9 @@
.mb-3 {
margin-bottom: calc(var(--spacing) * 3);
}
.mb-4 {
margin-bottom: calc(var(--spacing) * 4);
}
.mb-6 {
margin-bottom: calc(var(--spacing) * 6);
}
@@ -363,6 +368,15 @@
.ml-0 {
margin-left: calc(var(--spacing) * 0);
}
.ml-2 {
margin-left: calc(var(--spacing) * 2);
}
.line-clamp-1 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.block {
display: block;
}
@@ -378,6 +392,9 @@
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
.aspect-\[4\/5\] {
aspect-ratio: 4/5;
}
@@ -400,6 +417,9 @@
.h-2 {
height: calc(var(--spacing) * 2);
}
.h-3 {
height: calc(var(--spacing) * 3);
}
.h-4 {
height: calc(var(--spacing) * 4);
}
@@ -448,12 +468,18 @@
.w-10 {
width: calc(var(--spacing) * 10);
}
.w-12 {
width: calc(var(--spacing) * 12);
}
.w-auto {
width: auto;
}
.w-full {
width: 100%;
}
.w-px {
width: 1px;
}
.max-w-3xl {
max-width: var(--container-3xl);
}
@@ -481,6 +507,9 @@
.grow {
flex-grow: 1;
}
.border-collapse {
border-collapse: collapse;
}
.-translate-x-1\/2 {
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -492,6 +521,9 @@
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.cursor-not-allowed {
cursor: not-allowed;
}
.cursor-pointer {
cursor: pointer;
}
@@ -553,6 +585,20 @@
margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
}
}
.divide-y {
:where(& > :not(:last-child)) {
--tw-divide-y-reverse: 0;
border-bottom-style: var(--tw-border-style);
border-top-style: var(--tw-border-style);
border-top-width: calc(1px * var(--tw-divide-y-reverse));
border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
}
}
.divide-slate-100 {
:where(& > :not(:last-child)) {
border-color: var(--color-slate-100);
}
}
.overflow-hidden {
overflow: hidden;
}
@@ -622,6 +668,9 @@
.border-slate-200 {
border-color: var(--color-slate-200);
}
.border-slate-300 {
border-color: var(--color-slate-300);
}
.border-slate-300\/30 {
border-color: color-mix(in srgb, oklch(86.9% 0.022 252.894) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -640,6 +689,9 @@
.\!bg-green-600 {
background-color: var(--color-green-600) !important;
}
.bg-\[\#fae100\] {
background-color: #fae100;
}
.bg-amber-100 {
background-color: var(--color-amber-100);
}
@@ -718,12 +770,6 @@
.bg-slate-900 {
background-color: var(--color-slate-900);
}
.bg-slate-900\/10 {
background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-slate-900) 10%, transparent);
}
}
.bg-teal-100 {
background-color: var(--color-teal-100);
}
@@ -760,6 +806,9 @@
.p-1 {
padding: calc(var(--spacing) * 1);
}
.p-1\.5 {
padding: calc(var(--spacing) * 1.5);
}
.p-3 {
padding: calc(var(--spacing) * 3);
}
@@ -802,6 +851,9 @@
.py-12 {
padding-block: calc(var(--spacing) * 12);
}
.py-20 {
padding-block: calc(var(--spacing) * 20);
}
.pt-4 {
padding-top: calc(var(--spacing) * 4);
}
@@ -820,9 +872,16 @@
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-6xl {
font-size: var(--text-6xl);
line-height: var(--tw-leading, var(--text-6xl--line-height));
}
.text-base {
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
@@ -843,6 +902,12 @@
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
.\!text-\[14px\] {
font-size: 14px !important;
}
.\!text-\[20px\] {
font-size: 20px !important;
}
.text-\[10px\] {
font-size: 10px;
}
@@ -892,9 +957,6 @@
--tw-tracking: var(--tracking-widest);
letter-spacing: var(--tracking-widest);
}
.text-nowrap {
text-wrap: nowrap;
}
.wrap-break-word {
overflow-wrap: break-word;
}
@@ -908,6 +970,9 @@
.whitespace-nowrap {
white-space: nowrap;
}
.text-\[\#3c1e1e\] {
color: #3c1e1e;
}
.text-\[\#111418\] {
color: #111418;
}
@@ -959,6 +1024,9 @@
.text-sky-700 {
color: var(--color-sky-700);
}
.text-slate-300 {
color: var(--color-slate-300);
}
.text-slate-400 {
color: var(--color-slate-400);
}
@@ -968,6 +1036,9 @@
.text-slate-600 {
color: var(--color-slate-600);
}
.text-slate-800 {
color: var(--color-slate-800);
}
.text-slate-900 {
color: var(--color-slate-900);
}
@@ -983,6 +1054,9 @@
.line-through {
text-decoration-line: line-through;
}
.opacity-20 {
opacity: 20%;
}
.opacity-30 {
opacity: 30%;
}
@@ -1086,6 +1160,20 @@
color: var(--color-slate-400);
}
}
.hover\:bg-\[\#f7d600\] {
&:hover {
@media (hover: hover) {
background-color: #f7d600;
}
}
}
.hover\:bg-slate-50 {
&:hover {
@media (hover: hover) {
background-color: var(--color-slate-50);
}
}
}
.hover\:bg-slate-100 {
&:hover {
@media (hover: hover) {
@@ -1100,6 +1188,13 @@
}
}
}
.hover\:text-slate-600 {
&:hover {
@media (hover: hover) {
color: var(--color-slate-600);
}
}
}
.hover\:opacity-50 {
&:hover {
@media (hover: hover) {
@@ -1161,11 +1256,6 @@
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.sm\:flex-row {
@media (width >= 40rem) {
flex-direction: row;
}
}
.sm\:items-center {
@media (width >= 40rem) {
align-items: center;
@@ -1386,6 +1476,13 @@
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.dark\:divide-slate-800 {
@media (prefers-color-scheme: dark) {
:where(& > :not(:last-child)) {
border-color: var(--color-slate-800);
}
}
}
.dark\:border-gray-800 {
@media (prefers-color-scheme: dark) {
border-color: var(--color-gray-800);
@@ -1509,6 +1606,14 @@
background-color: var(--color-slate-800);
}
}
.dark\:bg-slate-800\/50 {
@media (prefers-color-scheme: dark) {
background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-slate-800) 50%, transparent);
}
}
}
.dark\:bg-slate-900 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-slate-900);
@@ -1605,6 +1710,11 @@
color: var(--color-slate-100);
}
}
.dark\:text-slate-200 {
@media (prefers-color-scheme: dark) {
color: var(--color-slate-200);
}
}
.dark\:text-slate-300 {
@media (prefers-color-scheme: dark) {
color: var(--color-slate-300);
@@ -1620,6 +1730,11 @@
color: var(--color-slate-500);
}
}
.dark\:text-slate-700 {
@media (prefers-color-scheme: dark) {
color: var(--color-slate-700);
}
}
.dark\:text-slate-900 {
@media (prefers-color-scheme: dark) {
color: var(--color-slate-900);
@@ -1653,6 +1768,27 @@
}
}
}
.dark\:hover\:bg-slate-800\/50 {
@media (prefers-color-scheme: dark) {
&:hover {
@media (hover: hover) {
background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-slate-800) 50%, transparent);
}
}
}
}
}
.dark\:hover\:text-slate-200 {
@media (prefers-color-scheme: dark) {
&:hover {
@media (hover: hover) {
color: var(--color-slate-200);
}
}
}
}
}
@property --tw-translate-x {
syntax: "*";
@@ -1694,6 +1830,11 @@
inherits: false;
initial-value: 0;
}
@property --tw-divide-y-reverse {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-border-style {
syntax: "*";
inherits: false;
@@ -1901,6 +2042,7 @@
--tw-skew-x: initial;
--tw-skew-y: initial;
--tw-space-y-reverse: 0;
--tw-divide-y-reverse: 0;
--tw-border-style: solid;
--tw-leading: initial;
--tw-font-weight: initial;