Taehoon/ITAM
2
0
Fork 0
Code Issues 25 Pull Requests Actions Packages Projects Releases Wiki Activity

style: apply Vercel-inspired responsive UI & fluid scaling

Browse Source
This commit is contained in:
이태훈
2026-06-16 17:43:20 +09:00
parent 155570e8de
commit 73ef13f3a5
21 changed files with 1927 additions and 3068 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/styles/common.css
View File

@@ -31,13 +31,18 @@
--success: #0070f3;
--header-height: 64px;
/* --- Global Typography Scale (Strict 16px Base) --- */
--fs-xs: 12px;
--fs-sm: 14px;
--fs-base: 16px;
--fs-md: 20px;
--fs-lg: 32px;
--fs-xl: 48px;
/* --- Global Typography Scale (Enhanced Fluid Base) --- */
--fs-xs: clamp(10px, 1.2vmin + 0.2vw, 15px);
--fs-sm: clamp(12px, 1.4vmin + 0.3vw, 18px);
--fs-base: clamp(14px, 1.6vmin + 0.4vw, 22px);
--fs-md: clamp(18px, 2.5vmin + 0.5vw, 30px);
--fs-lg: clamp(24px, 4vmin + 0.6vw, 48px);
--fs-xl: clamp(32px, 6vmin + 0.8vw, 72px);
/* --- Fluid Layout Units (Aggressive) --- */
--header-height: clamp(50px, 8vmin, 90px);
--spacing-base: clamp(0.75rem, 3vmin, 3rem);
--radius-base: clamp(6px, 1.5vmin, 16px);
}
* {
@@ -102,8 +107,8 @@ input, textarea {
}
.brand { display: flex; align-items: center; gap: 0.75rem; }
.main-logo { height: 26px; width: auto; }
.brand h1 { font-size: 1.1rem; font-weight: 600; color: var(--text-main); }
.main-logo { height: clamp(28px, 4vmin, 40px); width: auto; }
.brand h1 { font-size: clamp(0.85rem, 1.4vmin, 1.05rem); font-weight: 600; color: var(--text-main); }
.integrated-nav { flex: 1; display: flex; align-items: center; margin-left: 2rem; gap: 0.5rem; }
.gnb-trigger {
@@ -142,7 +147,7 @@ input, textarea {
padding: 0.2rem;
border: 1px solid var(--hairline);
gap: 0.1rem;
border-radius: 8px;
border-radius: var(--radius-base);
}
.toggle-btn {
@@ -154,7 +159,7 @@ input, textarea {
color: var(--text-muted);
cursor: pointer;
transition: all 0.1s;
border-radius: 6px;
border-radius: calc(var(--radius-base) - 2px);
}
.toggle-btn:hover { color: var(--text-main); }
@@ -245,7 +250,7 @@ input:checked + .role-slider:before {
font-weight: 500;
border-radius: 9999px;
cursor: pointer;
height: 36px;
height: clamp(32px, 4.5vmin, 44px);
transition: all 0.2s;
border: 1px solid transparent;
white-space: nowrap;
@@ -257,12 +262,12 @@ input:checked + .role-slider:before {
.btn-outline { background-color: var(--canvas); color: var(--text-main); border: 1px solid var(--hairline); }
.btn-outline:hover { border-color: var(--hairline-strong); background: var(--canvas-soft); }
.btn-sm { height: 30px; padding: 0 1rem; font-size: var(--fs-xs); }
.btn-sm { height: clamp(28px, 3.5vmin, 36px); padding: 0 1rem; font-size: var(--fs-xs); }
.btn-danger { color: var(--danger) !important; border-color: var(--danger) !important; }
/* --- Form Elements --- */
.form-select-sm {
height: 32px;
height: clamp(28px, 3.5vmin, 36px);
padding: 0 0.5rem;
border: 1px solid var(--hairline);
border-radius: 6px;
@@ -419,3 +424,40 @@ input:checked + .role-slider:before {
.clickable { cursor: pointer; transition: opacity 0.2s; }
.clickable:hover { opacity: 0.8; }
/* Flexbox & Grid Utilities */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.w-full { width: 100%; }
.h-full { height: 100%; }
/* Text Utilities */
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
/* --- Footer --- */
.main-footer {
border-top: 1px solid var(--border-color);
background-color: var(--canvas);
color: var(--mute);
padding: 1rem 2rem;
text-align: right;
font-size: var(--fs-xs);
flex-shrink: 0;
z-index: 10;
}
.main-footer p {
margin: 0;
letter-spacing: 0.02em;
}