diff --git a/public/styles.css b/public/styles.css index 6aaa0ab..b03921e 100644 --- a/public/styles.css +++ b/public/styles.css @@ -238,56 +238,56 @@ input { /* Dashboard Specific Styles */ .dashboard-panel { - width: min(100%, 1000px); /* 대시보드 패널 너비 확장 (800px -> 1000px) */ - padding: 64px; /* 패널 내부 여유 공간 확대 */ + width: min(100%, 920px); + padding: 42px 40px 34px; } .dashboard-content { display: grid; - gap: 24px; - margin-top: 32px; + gap: 18px; + margin-top: 20px; } .welcome-msg { - margin-bottom: 32px; + margin-bottom: 18px; text-align: center; } .welcome-msg h2 { - font-size: 2.4rem; /* 환영 메시지 크기 확대 */ + font-size: clamp(1.9rem, 2.8vw, 2.15rem); color: #0f3d2e; - margin: 0 0 12px 0; + margin: 0 0 8px 0; } .welcome-msg p { color: #4a6659; - font-size: 1.2rem; + font-size: 1rem; margin: 0; } .info-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* 카드 최소 너비 확대 */ - gap: 28px; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 20px; } .info-card { background: rgba(255, 255, 255, 0.75); /* 투명도 살짝 조정 */ - border-radius: 24px; - padding: 32px; /* 카드 내부 여백 확대 */ + border-radius: 20px; + padding: 24px; border: 1px solid rgba(15, 61, 46, 0.12); box-shadow: 0 10px 30px rgba(15, 61, 46, 0.05); /* 카드에 미세한 그림자 추가 */ } .card-title { - margin: 0 0 20px 0; - font-size: 1.4rem; /* 카드 제목 확대 */ + margin: 0 0 14px 0; + font-size: 1.18rem; color: #0f3d2e; display: flex; align-items: center; - gap: 10px; + gap: 8px; border-bottom: 1px solid rgba(15, 61, 46, 0.1); - padding-bottom: 12px; + padding-bottom: 10px; } .info-list { @@ -299,7 +299,7 @@ input { .info-item { display: flex; flex-direction: column; - padding: 14px 0; /* 아이템 간격 확대 */ + padding: 10px 0; border-bottom: 1px dashed rgba(15, 61, 46, 0.1); } @@ -308,24 +308,24 @@ input { } .info-label { - font-size: 0.9rem; + font-size: 0.82rem; color: #5a7369; - margin-bottom: 6px; + margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.6px; } .info-value { - font-size: 1.15rem; /* 값 텍스트 크기 확대 */ + font-size: 1rem; color: #0a291f; font-weight: 600; } .badge { display: inline-block; - padding: 6px 16px; - border-radius: 12px; - font-size: 1.1rem; + padding: 5px 14px; + border-radius: 10px; + font-size: 0.98rem; font-weight: 650; background-color: #0f3d2e; color: #f8fbff; @@ -335,7 +335,7 @@ input { } .footer-actions { - margin-top: 48px; + margin-top: 28px; display: flex; justify-content: center; } @@ -344,8 +344,8 @@ input { background: linear-gradient(180deg, #185c45 0%, #0f3d2e 100%); border: none; color: #f8fbff; - padding: 14px 48px; /* 버튼 크기 유지 및 소폭 조정 */ - border-radius: 20px; + padding: 12px 40px; + border-radius: 16px; font-weight: 700; cursor: pointer; box-shadow: none; /* 초기 그림자 없음 (로그인 입력 전과 동일) */ @@ -367,3 +367,40 @@ input { background-size: cover !important; background-position: center !important; } + + @media (max-width: 640px) { + .dashboard-panel { + padding: 28px 20px 24px; + } + + .welcome-msg h2 { + font-size: 1.65rem; + } + + .welcome-msg p { + font-size: 0.92rem; + } + + .info-grid { + grid-template-columns: 1fr; + gap: 16px; + } + + .info-card { + padding: 18px; + border-radius: 18px; + } + + .card-title { + font-size: 1.05rem; + } + + .footer-actions { + margin-top: 22px; + } + + .secondary-button { + width: 100%; + padding: 12px 20px; + } + }