design: 워밍-프로페셔널 스타일시스템으로 완전 리디자인

- site.css: 색상 팔레트 전환 (골드/브론즈/초록/베이지)
- admin.css: MudBlazor 커스터마이징으로 일관성 있는 관리자 UI
- theme-color 메타 태그 업데이트

변경사항:
- 주색: #1B4F8A(네이비) → #C89D6E(따뜻한 골드)
- 보조색: 새로 추가 #2E5C4E(따뜻한 초록)
- 배경: #F7F9FC(차가운 화이트) → #F9F7F3(따뜻한 화이트)
- 그라데이션, 섀도우, 타이포그래피 개선

이전: 기본적인 텍스트 나열식 디자인
현재: 경험 많은 세무사 사무실 느낌의 세련되고 전문적인 디자인

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

TaxBaik.Web/Pages/_Layout.cshtml

@@ -10,7 +10,7 @@
     <meta property="og:image" content="@ViewData["OgImage"]" />
     <meta property="og:url" content="@ViewData["OgUrl"]" />
     <meta name="robots" content="index, follow" />
-    <meta name="theme-color" content="#1B4F8A" />
+    <meta name="theme-color" content="#C89D6E" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />

TaxBaik.Web/wwwroot/css/site.css

@@ -1,14 +1,18 @@
+/* TaxBaik — 워밍-프로페셔널 디자인 시스템 */
+
 :root {
-    --color-primary: #1B4F8A;
+    /* 워밍-프로페셔널 팔레트 */
-    --color-primary-dark: #133970;
+    --color-primary: #C89D6E;        /* 따뜻한 골드/브론즈 */
-    --color-primary-light: #2E5FA3;
+    --color-primary-dark: #A67C52;   /* 진한 브론즈 */
-    --color-accent: #C9A227;
+    --color-secondary: #2E5C4E;      /* 따뜻한 초록 */
-    --color-cta: #E05A2B;
+    --color-secondary-dark: #1F3A30; /* 어두운 초록 */
-    --color-cta-dark: #D45A1F;
+    --color-accent: #E8E4D8;         /* 따뜻한 베이지 */
-    --color-bg: #F7F9FC;
+    --color-accent-dark: #D9D3C4;    /* 더 진한 베이지 */
-    --color-text: #1A1A2E;
+    --color-bg: #F9F7F3;             /* 따뜻한 화이트 */
-    --color-text-muted: #5A6A7A;
+    --color-bg-alt: #EFE9DD;         /* 대체 배경 */
-    --color-border: #D8E2EE;
+    --color-text: #3D2817;           /* 따뜻한 갈색 */
+    --color-text-light: #6B5D4F;     /* 밝은 갈색 */
+    --color-border: #D9D3C4;         /* 경계선 */
     --color-success: #2E7D32;
     --color-warning: #F57C00;
     --color-danger: #C62828;
@@ -19,10 +23,17 @@
     --spacing-lg: 1.5rem;
     --spacing-xl: 2rem;
     --spacing-2xl: 3rem;
+    --spacing-3xl: 4rem;
 
     --radius-sm: 4px;
     --radius-md: 8px;
     --radius-lg: 12px;
+    --radius-xl: 16px;
+
+    --shadow-sm: 0 1px 3px rgba(61, 40, 23, 0.08);
+    --shadow-md: 0 4px 12px rgba(61, 40, 23, 0.12);
+    --shadow-lg: 0 8px 24px rgba(61, 40, 23, 0.15);
+    --shadow-xl: 0 12px 48px rgba(61, 40, 23, 0.18);
 
     --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
     --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -30,6 +41,8 @@
 
 * {
     font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 html {
@@ -39,20 +52,58 @@ html {
 
 body {
     color: var(--color-text);
-    background-color: #fff;
+    background-color: var(--color-bg);
-    line-height: 1.75;
+    line-height: 1.8;
-    font-size: clamp(0.875rem, 2.5vw, 1rem);
+    font-size: clamp(0.9rem, 2.5vw, 1rem);
+    letter-spacing: 0.3px;
 }
 
-/* 버튼 스타일 */
+/* ===== 타이포그래피 ===== */
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 700;
+    line-height: 1.3;
+    color: var(--color-text);
+    margin-bottom: var(--spacing-lg);
+    letter-spacing: -0.5px;
+}
+
+h1 { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 800; }
+h2 { font-size: clamp(1.5rem, 5vw, 2.5rem); }
+h3 { font-size: clamp(1.25rem, 4vw, 2rem); }
+h4 { font-size: 1.35rem; }
+h5 { font-size: 1.15rem; }
+h6 { font-size: 1rem; }
+
+p {
+    margin-bottom: var(--spacing-md);
+    color: var(--color-text-light);
+    line-height: 1.85;
+}
+
+a {
+    color: var(--color-primary);
+    text-decoration: none;
+    transition: all var(--transition-fast);
+}
+
+a:hover {
+    color: var(--color-secondary);
+    text-decoration: none;
+}
+
+/* ===== 버튼 ===== */
 .btn {
     border-radius: var(--radius-md);
-    font-weight: 500;
+    font-weight: 600;
-    transition: all var(--transition-fast);
+    transition: all var(--transition-normal);
     cursor: pointer;
     border: none;
-    padding: 0.625rem 1.5rem;
+    padding: 0.75rem 2rem;
     font-size: 1rem;
+    letter-spacing: 0.3px;
+    display: inline-block;
+    text-align: center;
+    text-decoration: none;
 }
 
 .btn:active {
@@ -60,32 +111,32 @@ body {
 }
 
 .btn-primary {
-    background-color: var(--color-primary);
+    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
-    border-color: var(--color-primary);
     color: white;
+    box-shadow: var(--shadow-md);
 }
 
 .btn-primary:hover {
-    background-color: var(--color-primary-dark);
+    background: linear-gradient(135deg, var(--color-primary-dark) 0%, #8B5E3C 100%);
-    border-color: var(--color-primary-dark);
+    box-shadow: var(--shadow-lg);
-    box-shadow: 0 4px 12px rgba(27, 79, 138, 0.25);
+    transform: translateY(-2px);
 }
 
 .btn-warning {
-    background-color: var(--color-cta);
+    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
-    border-color: var(--color-cta);
     color: white;
+    box-shadow: var(--shadow-md);
 }
 
 .btn-warning:hover {
-    background-color: var(--color-cta-dark);
+    background: linear-gradient(135deg, var(--color-secondary-dark) 0%, #0D1E1A 100%);
-    border-color: var(--color-cta-dark);
+    box-shadow: var(--shadow-lg);
-    box-shadow: 0 4px 12px rgba(224, 90, 43, 0.25);
+    transform: translateY(-2px);
 }
 
 .btn-outline-primary {
     color: var(--color-primary);
-    border-color: var(--color-primary);
+    border: 2px solid var(--color-primary);
     background: transparent;
 }
 
@@ -94,63 +145,30 @@ body {
     color: white;
 }
 
-/* 배경 및 텍스트 */
+.btn-lg {
-.bg-primary {
+    padding: 1rem 2.5rem;
-    background-color: var(--color-primary) !important;
+    font-size: 1.1rem;
 }
 
-.bg-primary-light {
+.btn-sm {
-    background-color: #E8F1F8 !important;
+    padding: 0.5rem 1.25rem;
+    font-size: 0.95rem;
 }
 
-.text-primary {
+/* ===== 카드 ===== */
-    color: var(--color-primary) !important;
+.card {
-}
+    border: 1px solid var(--color-border);
-
+    border-radius: var(--radius-xl);
-.text-muted {
+    transition: all var(--transition-normal);
-    color: var(--color-text-muted) !important;
+    box-shadow: var(--shadow-sm);
-}
+    background: white;
-
-/* 히어로 섹션 */
-.hero-section {
-    padding: clamp(2rem, 15vh, 5rem) 0;
-    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
-    color: white;
-    position: relative;
     overflow: hidden;
 }
 
-.hero-section::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 500px;
-    height: 500px;
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 50%;
-    transform: translate(30%, -30%);
-}
-
-.hero-section h1 {
-    font-size: clamp(1.5rem, 5vw, 3rem);
-    font-weight: 700;
-    margin-bottom: var(--spacing-lg);
-    position: relative;
-    z-index: 1;
-}
-
-/* 카드 스타일 */
-.card {
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    transition: all var(--transition-normal);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
-
 .card:hover {
-    transform: translateY(-4px);
+    transform: translateY(-6px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--color-primary);
 }
 
 .card-body {
@@ -158,294 +176,293 @@ body {
 }
 
 .card-title {
-    font-weight: 600;
-    color: var(--color-primary);
-    margin-bottom: var(--spacing-md);
-}
-
-/* 네비게이션 */
-.navbar-brand {
-    font-size: 1.25rem;
     font-weight: 700;
-    color: var(--color-primary) !important;
+    color: var(--color-text);
+    margin-bottom: var(--spacing-md);
+    font-size: 1.25rem;
 }
 
-.navbar {
+.card-text {
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+    color: var(--color-text-light);
+    line-height: 1.8;
+}
+
+/* ===== 히어로 섹션 ===== */
+.hero-section {
+    padding: clamp(3rem, 20vh, 6rem) 0;
+    background: linear-gradient(135deg, var(--color-secondary) 0%, #1F3A30 100%);
+    color: white;
+    position: relative;
+    overflow: hidden;
+    border-bottom: 4px solid var(--color-primary);
+}
+
+.hero-section::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -10%;
+    width: 600px;
+    height: 600px;
+    background: rgba(200, 157, 110, 0.1);
+    border-radius: 50%;
+}
+
+.hero-section::after {
+    content: '';
+    position: absolute;
+    bottom: -30%;
+    left: -10%;
+    width: 500px;
+    height: 500px;
+    background: rgba(232, 228, 216, 0.05);
+    border-radius: 50%;
+}
+
+.hero-section h1 {
+    font-size: clamp(2rem, 8vw, 3.5rem);
+    font-weight: 800;
+    margin-bottom: var(--spacing-lg);
+    position: relative;
+    z-index: 1;
+    color: white;
+}
+
+.hero-section p {
+    font-size: 1.2rem;
+    margin-bottom: var(--spacing-xl);
+    position: relative;
+    z-index: 1;
+    color: rgba(255, 255, 255, 0.95);
+    line-height: 1.8;
+}
+
+/* ===== 섹션 ===== */
+.bg-light {
+    background-color: var(--color-accent) !important;
+}
+
+.bg-primary {
+    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
+}
+
+.section-title {
+    font-size: clamp(1.75rem, 5vw, 2.75rem);
+    font-weight: 800;
+    color: var(--color-text);
+    margin-bottom: var(--spacing-xl);
+    text-align: center;
+    position: relative;
+    display: inline-block;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+}
+
+.section-title::after {
+    content: '';
+    display: block;
+    width: 60px;
+    height: 4px;
+    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
+    margin: var(--spacing-md) auto 0;
+    border-radius: 2px;
+}
+
+/* ===== 휴스 스트립 (신뢰도) ===== */
+.trust-strip {
+    background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-accent) 100%);
+    padding: var(--spacing-3xl) 0;
+    border-top: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.trust-item {
+    text-align: center;
+}
+
+.trust-icon {
+    font-size: 3.5rem;
+    margin-bottom: var(--spacing-md);
+    display: block;
+}
+
+.trust-item h3 {
+    color: var(--color-text);
+    margin-bottom: var(--spacing-sm);
+    font-size: 1.35rem;
+}
+
+.trust-item p {
+    color: var(--color-text-light);
+    font-size: 0.95rem;
+}
+
+/* ===== 배지 ===== */
+.badge {
+    border-radius: var(--radius-md);
+    padding: 0.35rem 0.75rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+    display: inline-block;
+    letter-spacing: 0.2px;
+}
+
+.bg-primary-badge {
+    background-color: rgba(200, 157, 110, 0.15);
+    color: var(--color-primary);
+}
+
+/* ===== 폼 ===== */
+.form-control, .form-select {
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    transition: all var(--transition-fast);
     background-color: white;
-    padding: var(--spacing-md) 0;
+    color: var(--color-text);
 }
 
-.navbar.sticky {
+.form-control:focus, .form-select:focus {
-    position: sticky;
+    border-color: var(--color-primary);
-    top: 0;
+    box-shadow: 0 0 0 3px rgba(200, 157, 110, 0.1);
-    z-index: 999;
+    outline: none;
 }
 
-.nav-link {
+/* ===== 모바일 CTA 바 ===== */
-    color: var(--color-text) !important;
-    font-weight: 500;
-    transition: color var(--transition-fast);
-    margin: 0 var(--spacing-sm);
-}
-
-.nav-link:hover {
-    color: var(--color-primary) !important;
-}
-
-.nav-link.active {
-    color: var(--color-cta) !important;
-}
-
-/* 모바일 CTA 바 */
 .mobile-cta-bar {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     background: white;
-    border-top: 2px solid var(--color-border);
+    border-top: 2px solid var(--color-primary);
     padding: var(--spacing-md);
     z-index: 1000;
-    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 -4px 12px rgba(61, 40, 23, 0.1);
 }
 
 .btn-kakao-mobile {
     display: block;
     width: 100%;
-    padding: var(--spacing-md);
+    padding: 0.85rem;
-    background: #FFE812;
+    background: linear-gradient(135deg, #FFE812 0%, #FDD835 100%);
     color: #000;
     text-decoration: none;
     border-radius: var(--radius-md);
-    font-weight: 600;
+    font-weight: 700;
     text-align: center;
     border: none;
     cursor: pointer;
     font-size: 0.95rem;
-    transition: background var(--transition-fast);
+    transition: all var(--transition-fast);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    letter-spacing: 0.3px;
 }
 
 .btn-kakao-mobile:hover {
-    background: #FDD835;
+    background: linear-gradient(135deg, #FDD835 0%, #FBC02D 100%);
     text-decoration: none;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
-.btn-kakao-mobile:active {
-    transform: scale(0.98);
-}
-
-/* 페이지 스페이싱 */
 body.with-mobile-cta {
     padding-bottom: 70px;
 }
 
-/* 섹션 */
+/* ===== 네비게이션 ===== */
-.section {
+.navbar {
-    padding: var(--spacing-2xl) 0;
+    background-color: white;
+    box-shadow: var(--shadow-sm);
+    padding: 1rem 0;
 }
 
-.section-title {
+.navbar-brand {
-    font-size: clamp(1.5rem, 4vw, 2.5rem);
+    font-weight: 800;
-    font-weight: 700;
+    color: var(--color-primary) !important;
-    color: var(--color-primary);
+    font-size: 1.35rem;
-    margin-bottom: var(--spacing-xl);
+    letter-spacing: -0.5px;
-    text-align: center;
 }
 
-/* 배지 */
+.nav-link {
-.badge {
+    color: var(--color-text) !important;
-    border-radius: var(--radius-sm);
+    font-weight: 600;
-    padding: var(--spacing-xs) var(--spacing-sm);
+    transition: all var(--transition-fast);
-    font-size: 0.875rem;
+    margin: 0 var(--spacing-sm);
-    font-weight: 500;
+    letter-spacing: 0.2px;
 }
 
-.badge-success {
+.nav-link:hover {
-    background-color: #E8F5E9;
+    color: var(--color-primary) !important;
-    color: var(--color-success);
 }
 
-/* 폼 요소 */
+/* ===== 반응형 ===== */
-.form-control, .form-select {
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    padding: 0.625rem 1rem;
-    font-size: 1rem;
-    transition: border-color var(--transition-fast);
-}
-
-.form-control:focus, .form-select:focus {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px rgba(27, 79, 138, 0.1);
-}
-
-/* 이미지 최적화 */
-img {
-    max-width: 100%;
-    height: auto;
-    display: block;
-}
-
-img[loading="lazy"] {
-    background-color: #f0f0f0;
-}
-
-/* 타이포그래피 */
-h1, h2, h3, h4, h5, h6 {
-    font-weight: 700;
-    line-height: 1.25;
-    color: var(--color-text);
-}
-
-h1 { font-size: clamp(1.75rem, 5vw, 3rem); }
-h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
-h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
-h4 { font-size: 1.25rem; }
-h5 { font-size: 1.1rem; }
-h6 { font-size: 1rem; }
-
-p {
-    margin-bottom: var(--spacing-md);
-}
-
-a {
-    color: var(--color-primary);
-    text-decoration: none;
-    transition: color var(--transition-fast);
-}
-
-a:hover {
-    color: var(--color-cta);
-    text-decoration: underline;
-}
-
-/* 리스트 */
-.list-group-item {
-    border-color: var(--color-border);
-    padding: var(--spacing-md) var(--spacing-lg);
-}
-
-/* 모달 */
-.modal-content {
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.16);
-}
-
-.modal-header {
-    border-bottom: 1px solid var(--color-border);
-    padding: var(--spacing-xl);
-}
-
-.modal-footer {
-    border-top: 1px solid var(--color-border);
-    padding: var(--spacing-xl);
-}
-
-/* 탭 */
-.nav-tabs .nav-link {
-    color: var(--color-text-muted);
-    border-bottom: 3px solid transparent;
-    margin-bottom: -3px;
-    padding: var(--spacing-md) var(--spacing-lg);
-}
-
-.nav-tabs .nav-link:hover {
-    color: var(--color-primary);
-    border-color: transparent;
-}
-
-.nav-tabs .nav-link.active {
-    color: var(--color-primary);
-    border-bottom-color: var(--color-primary);
-    background-color: transparent;
-}
-
-/* 페이지네이션 */
-.pagination .page-link {
-    border-color: var(--color-border);
-    color: var(--color-primary);
-}
-
-.pagination .page-link:hover {
-    background-color: var(--color-bg);
-    border-color: var(--color-border);
-}
-
-.pagination .page-item.active .page-link {
-    background-color: var(--color-primary);
-    border-color: var(--color-primary);
-}
-
-/* 반응형 — 태블릿 이상 */
-@media (min-width: 768px) {
-    .container {
-        max-width: 960px;
-    }
-}
-
-/* 반응형 — 모바일 (375px ~) */
 @media (max-width: 767.98px) {
+    h1 { font-size: 1.75rem; }
+    h2 { font-size: 1.35rem; }
+
     .hero-section {
-        padding-top: 2rem;
+        padding: 2rem 0;
-        padding-bottom: 2rem;
-    }
-
-    .section {
-        padding: 1.5rem 0;
-    }
-
-    .card-body {
-        padding: 1rem;
-    }
-
-    .modal {
-        padding: 0 !important;
-    }
-
-    .modal-dialog {
-        margin: 0.5rem;
-    }
-
-    .btn {
-        padding: 0.5rem 1rem;
-        font-size: 0.95rem;
-    }
-
-    .nav-link {
-        padding: 0.5rem 0.75rem !important;
-        margin: 0 !important;
     }
 
     .section-title {
         font-size: 1.5rem;
     }
-}
-
-/* 초소형 화면 (max 375px) */
-@media (max-width: 375px) {
-    html {
-        font-size: 14px;
-    }
-
-    .hero-section h1 {
-        font-size: 1.25rem;
-    }
 
     .card {
         margin-bottom: 1rem;
     }
 
-    .container-fluid {
+    .btn {
-        padding-left: 0.75rem;
+        padding: 0.65rem 1.5rem;
-        padding-right: 0.75rem;
+        font-size: 0.95rem;
+    }
+
+    .trust-icon {
+        font-size: 2.5rem;
+    }
+
+    .container {
+        padding: 0 var(--spacing-md);
     }
 }
 
-/* 도움말 텍스트 */
+@media (max-width: 375px) {
-.form-text {
+    html { font-size: 15px; }
-    color: var(--color-text-muted);
+
-    font-size: 0.875rem;
+    h1 { font-size: 1.5rem; }
-    margin-top: 0.25rem;
+
+    .hero-section h1 {
+        font-size: 1.5rem;
+        margin-bottom: var(--spacing-md);
+    }
+
+    .hero-section p {
+        font-size: 1rem;
+    }
+
+    .card-body {
+        padding: 1rem;
+    }
+}
+
+/* ===== 일반 유틸리티 ===== */
+.text-muted {
+    color: var(--color-text-light) !important;
+}
+
+.border-light {
+    border-color: var(--color-border) !important;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    border-radius: var(--radius-lg);
+}
+
+.container {
+    max-width: 1200px;
 }