kjh2064/taxbaik
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

style: 홈페이지 테마를 네이비로 개편

Browse Source
This commit is contained in:
김재현
2026-06-30 18:18:44 +09:00
parent 62ea632a50
commit 2d352787f9
4 changed files with 110 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TaxBaik.Web/Pages/Index.cshtml
+8 -8
View File
@@ -81,7 +81,7 @@ else
<span class="badge bg-primary-badge mb-3">경험 있는 세무사의 맞춤 전략</span> <span class="badge bg-primary-badge mb-3">경험 있는 세무사의 맞춤 전략</span>
<h1 class="mb-3"> <h1 class="mb-3">
세금과 자산<br/> 세금과 자산<br/>
<span style="color: #E8E4D8;">한 번에 해결하는</span> <span style="color: #FFD54F;">한 번에 해결하는</span>
</h1> </h1>
<p class="fs-5 mb-4" style="line-height: 1.8; opacity: 0.95;"> <p class="fs-5 mb-4" style="line-height: 1.8; opacity: 0.95;">
사업자 세무, 부동산 거래, 가족자산 관리를 위한<br/> 사업자 세무, 부동산 거래, 가족자산 관리를 위한<br/>
@@ -229,7 +229,7 @@ else
</section> </section>
<!-- 상담 프로세스 --> <!-- 상담 프로세스 -->
<section class="py-5" style="background: #F9F7F3;"> <section class="py-5" style="background: #F7F9FC;">
<div class="container"> <div class="container">
<div class="text-center mb-5"> <div class="text-center mb-5">
<h2 class="section-title">상담 과정</h2> <h2 class="section-title">상담 과정</h2>
@@ -237,28 +237,28 @@ else
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-md-3 text-center mb-4 mb-md-0"> <div class="col-md-3 text-center mb-4 mb-md-0">
<div style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #C89D6E 0%, #A67C52 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;"> <div style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #1B4F8A 0%, #133970 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;">
📞 📞
</div> </div>
<h4>1단계: 무료 상담</h4> <h4>1단계: 무료 상담</h4>
<p class="text-muted small">상황 파악 및<br/>현재 문제점 확인</p> <p class="text-muted small">상황 파악 및<br/>현재 문제점 확인</p>
</div> </div>
<div class="col-md-3 text-center mb-4 mb-md-0"> <div class="col-md-3 text-center mb-4 mb-md-0">
<div style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #C89D6E 0%, #A67C52 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;"> <div style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #1B4F8A 0%, #133970 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;">
📋 📋
</div> </div>
<h4>2단계: 세무진단</h4> <h4>2단계: 세무진단</h4>
<p class="text-muted small">자료 분석 및<br/>최적 방안 도출</p> <p class="text-muted small">자료 분석 및<br/>최적 방안 도출</p>
</div> </div>
<div class="col-md-3 text-center mb-4 mb-md-0"> <div class="col-md-3 text-center mb-4 mb-md-0">
<div style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #C89D6E 0%, #A67C52 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;"> <div style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #1B4F8A 0%, #133970 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;">
💡 💡
</div> </div>
<h4>3단계: 맞춤제안</h4> <h4>3단계: 맞춤제안</h4>
<p class="text-muted small">절세 전략 및<br/>실행 계획 제시</p> <p class="text-muted small">절세 전략 및<br/>실행 계획 제시</p>
</div> </div>
<div class="col-md-3 text-center"> <div class="col-md-3 text-center">
<div style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #C89D6E 0%, #A67C52 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;"> <div style="width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, #1B4F8A 0%, #133970 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;">
✅ ✅
</div> </div>
<h4>4단계: 실행지원</h4> <h4>4단계: 실행지원</h4>
@@ -355,7 +355,7 @@ else
<!-- 자주 묻는 질문 (DB 연동) --> <!-- 자주 묻는 질문 (DB 연동) -->
@if (Model.ActiveFaqs.Count > 0) @if (Model.ActiveFaqs.Count > 0)
{ {
<section class="py-5" style="background: #F9F7F3;"> <section class="py-5" style="background: #F7F9FC;">
<div class="container"> <div class="container">
<div class="text-center mb-5"> <div class="text-center mb-5">
<h2 class="section-title">자주 묻는 질문</h2> <h2 class="section-title">자주 묻는 질문</h2>
@@ -392,7 +392,7 @@ else
} }
<!-- 최종 CTA --> <!-- 최종 CTA -->
<section class="py-5" style="background: linear-gradient(135deg, #2E5C4E 0%, #1F3A30 100%); color: white;"> <section class="py-5" style="background: linear-gradient(135deg, #1B4F8A 0%, #133970 100%); color: white;">
<div class="container text-center"> <div class="container text-center">
@if (season != null) @if (season != null)
{ {
TaxBaik.Web/Pages/_Layout.cshtml
+1 -1
View File
@@ -25,7 +25,7 @@
<!-- <meta name="google-site-verification" content="구글_서치콘솔_토큰_입력" /> --> <!-- <meta name="google-site-verification" content="구글_서치콘솔_토큰_입력" /> -->
<meta name="robots" content="index, follow" /> <meta name="robots" content="index, follow" />
<meta name="theme-color" content="#C89D6E" /> <meta name="theme-color" content="#1B4F8A" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net" /> <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
TaxBaik.Web/wwwroot/css/site.css
+91 -98
View File
@@ -1,18 +1,22 @@
/* TaxBaik — 워밍-프로페셔널 디자인 시스템 */ /* TaxBaik — Navy Blue 디자인 시스템 */
:root { :root {
/* 워밍-프로페셔널 팔레트 */ /* Navy Blue 팔레트 */
--color-primary: #C89D6E; /* 따뜻한 골드/브론즈 */ --color-primary: #1B4F8A; /* 네이비 */
--color-primary-dark: #A67C52; /* 진한 브론즈 */ --color-primary-dark: #133970; /* 진한 네이비 */
--color-secondary: #2E5C4E; /* 따뜻한 초록 */ --color-primary-light: #2E5FA3; /* 밝은 네이비 */
--color-secondary-dark: #1F3A30; /* 어두운 초록 */ --color-secondary: #2E5FA3; /* 보조 (밝은 네이비) */
--color-accent: #E8E4D8; /* 따뜻한 베이지 */ --color-secondary-dark: #1B4F8A; /* 보조 진한 */
--color-accent-dark: #D9D3C4; /* 더 진한 베이지 */ --color-accent: #E8F1F8; /* 연한 블루 배경 */
--color-bg: #F9F7F3; /* 따뜻한 화이트 */ --color-accent-dark: #D8E2EE; /* 더 진한 연블루 */
--color-bg-alt: #EFE9DD; /* 대체 배경 */ --color-bg: #F7F9FC; /* 차가운 화이트 */
--color-text: #3D2817; /* 따뜻한 갈색 */ --color-bg-alt: #EAF1F8; /* 대체 배경 */
--color-text-light: #6B5D4F; /* 밝은 갈색 */ --color-text: #1A1A2E; /* 본문 텍스트 */
--color-border: #D9D3C4; /* 경계선 */ --color-text-light: #5A6A7A; /* 보조 텍스트 */
--color-border: #D8E2EE; /* 경계선 */
--color-cta: #E05A2B; /* 오렌지 CTA */
--color-cta-dark: #D45A1F; /* 진한 오렌지 */
--color-gold: #C9A227; /* 골드 액센트 */
--color-success: #2E7D32; --color-success: #2E7D32;
--color-warning: #F57C00; --color-warning: #F57C00;
--color-danger: #C62828; --color-danger: #C62828;
@@ -30,10 +34,10 @@
--radius-lg: 12px; --radius-lg: 12px;
--radius-xl: 16px; --radius-xl: 16px;
--shadow-sm: 0 1px 3px rgba(61, 40, 23, 0.08); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px rgba(61, 40, 23, 0.12); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 24px rgba(61, 40, 23, 0.15); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
--shadow-xl: 0 12px 48px rgba(61, 40, 23, 0.18); --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15);
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -52,10 +56,9 @@ html {
body { body {
color: var(--color-text); color: var(--color-text);
background-color: var(--color-bg); background-color: #fff;
line-height: 1.8; line-height: 1.75;
font-size: clamp(0.9rem, 2.5vw, 1rem); font-size: clamp(0.875rem, 2.5vw, 1rem);
letter-spacing: 0.3px;
} }
/* ===== 타이포그래피 ===== */ /* ===== 타이포그래피 ===== */
@@ -64,12 +67,11 @@ h1, h2, h3, h4, h5, h6 {
line-height: 1.3; line-height: 1.3;
color: var(--color-text); color: var(--color-text);
margin-bottom: var(--spacing-lg); margin-bottom: var(--spacing-lg);
letter-spacing: -0.5px;
} }
h1 { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 800; } h1 { font-size: clamp(1.75rem, 5vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 5vw, 2.5rem); } h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 4vw, 2rem); } h3 { font-size: clamp(1.25rem, 3.5vw, 2rem); }
h4 { font-size: 1.35rem; } h4 { font-size: 1.35rem; }
h5 { font-size: 1.15rem; } h5 { font-size: 1.15rem; }
h6 { font-size: 1rem; } h6 { font-size: 1rem; }
@@ -77,17 +79,17 @@ h6 { font-size: 1rem; }
p { p {
margin-bottom: var(--spacing-md); margin-bottom: var(--spacing-md);
color: var(--color-text-light); color: var(--color-text-light);
line-height: 1.85; line-height: 1.8;
} }
a { a {
color: var(--color-primary); color: var(--color-primary);
text-decoration: none; text-decoration: none;
transition: all var(--transition-fast); transition: color var(--transition-fast);
} }
a:hover { a:hover {
color: var(--color-secondary); color: var(--color-primary-dark);
text-decoration: none; text-decoration: none;
} }
@@ -95,12 +97,11 @@ a:hover {
.btn { .btn {
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-weight: 600; font-weight: 600;
transition: all var(--transition-normal); transition: all var(--transition-fast);
cursor: pointer; cursor: pointer;
border: none; border: none;
padding: 0.75rem 2rem; padding: 0.75rem 2rem;
font-size: 1rem; font-size: 1rem;
letter-spacing: 0.3px;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@@ -111,27 +112,29 @@ a:hover {
} }
.btn-primary { .btn-primary {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); background-color: var(--color-primary);
border-color: var(--color-primary);
color: white; color: white;
box-shadow: var(--shadow-md);
} }
.btn-primary:hover { .btn-primary:hover {
background: linear-gradient(135deg, var(--color-primary-dark) 0%, #8B5E3C 100%); background-color: var(--color-primary-dark);
box-shadow: var(--shadow-lg); border-color: var(--color-primary-dark);
transform: translateY(-2px); color: white;
box-shadow: 0 4px 12px rgba(27, 79, 138, 0.25);
} }
.btn-warning { .btn-warning {
background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%); background-color: var(--color-cta);
border-color: var(--color-cta);
color: white; color: white;
box-shadow: var(--shadow-md);
} }
.btn-warning:hover { .btn-warning:hover {
background: linear-gradient(135deg, var(--color-secondary-dark) 0%, #0D1E1A 100%); background-color: var(--color-cta-dark);
box-shadow: var(--shadow-lg); border-color: var(--color-cta-dark);
transform: translateY(-2px); color: white;
box-shadow: 0 4px 12px rgba(224, 90, 43, 0.25);
} }
.btn-outline-primary { .btn-outline-primary {
@@ -158,7 +161,7 @@ a:hover {
/* ===== 카드 ===== */ /* ===== 카드 ===== */
.card { .card {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--radius-xl); border-radius: var(--radius-lg);
transition: all var(--transition-normal); transition: all var(--transition-normal);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
background: white; background: white;
@@ -166,7 +169,7 @@ a:hover {
} }
.card:hover { .card:hover {
transform: translateY(-6px); transform: translateY(-4px);
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
border-color: var(--color-primary); border-color: var(--color-primary);
} }
@@ -176,8 +179,8 @@ a:hover {
} }
.card-title { .card-title {
font-weight: 700; font-weight: 600;
color: var(--color-text); color: var(--color-primary);
margin-bottom: var(--spacing-md); margin-bottom: var(--spacing-md);
font-size: 1.25rem; font-size: 1.25rem;
} }
@@ -189,39 +192,28 @@ a:hover {
/* ===== 히어로 섹션 ===== */ /* ===== 히어로 섹션 ===== */
.hero-section { .hero-section {
padding: clamp(3rem, 20vh, 6rem) 0; padding: clamp(2rem, 15vh, 5rem) 0;
background: linear-gradient(135deg, var(--color-secondary) 0%, #1F3A30 100%); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: white; color: white;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-bottom: 4px solid var(--color-primary);
} }
.hero-section::before { .hero-section::before {
content: ''; content: '';
position: absolute; position: absolute;
top: -50%; top: 0;
right: -10%; right: 0;
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; width: 500px;
height: 500px; height: 500px;
background: rgba(232, 228, 216, 0.05); background: rgba(255, 255, 255, 0.05);
border-radius: 50%; border-radius: 50%;
transform: translate(30%, -30%);
} }
.hero-section h1 { .hero-section h1 {
font-size: clamp(2rem, 8vw, 3.5rem); font-size: clamp(1.75rem, 6vw, 3rem);
font-weight: 800; font-weight: 700;
margin-bottom: var(--spacing-lg); margin-bottom: var(--spacing-lg);
position: relative; position: relative;
z-index: 1; z-index: 1;
@@ -243,12 +235,12 @@ a:hover {
} }
.bg-primary { .bg-primary {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); background-color: var(--color-primary) !important;
} }
.section-title { .section-title {
font-size: clamp(1.75rem, 5vw, 2.75rem); font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: 800; font-weight: 700;
color: var(--color-text); color: var(--color-text);
margin-bottom: var(--spacing-xl); margin-bottom: var(--spacing-xl);
text-align: center; text-align: center;
@@ -264,14 +256,14 @@ a:hover {
display: block; display: block;
width: 60px; width: 60px;
height: 4px; height: 4px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%); background: var(--color-primary);
margin: var(--spacing-md) auto 0; margin: var(--spacing-md) auto 0;
border-radius: 2px; border-radius: 2px;
} }
/* ===== 휴스 스트립 (신뢰도) ===== */ /* ===== 신뢰도 스트립 ===== */
.trust-strip { .trust-strip {
background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-accent) 100%); background-color: var(--color-accent);
padding: var(--spacing-3xl) 0; padding: var(--spacing-3xl) 0;
border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
@@ -305,11 +297,10 @@ a:hover {
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 600; font-weight: 600;
display: inline-block; display: inline-block;
letter-spacing: 0.2px;
} }
.bg-primary-badge { .bg-primary-badge {
background-color: rgba(200, 157, 110, 0.15); background-color: rgba(27, 79, 138, 0.1);
color: var(--color-primary); color: var(--color-primary);
} }
@@ -326,7 +317,7 @@ a:hover {
.form-control:focus, .form-select:focus { .form-control:focus, .form-select:focus {
border-color: var(--color-primary); border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(200, 157, 110, 0.1); box-shadow: 0 0 0 3px rgba(27, 79, 138, 0.1);
outline: none; outline: none;
} }
@@ -340,31 +331,28 @@ a:hover {
border-top: 2px solid var(--color-primary); border-top: 2px solid var(--color-primary);
padding: var(--spacing-md); padding: var(--spacing-md);
z-index: 1000; z-index: 1000;
box-shadow: 0 -4px 12px rgba(61, 40, 23, 0.1); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
} }
.btn-kakao-mobile { .btn-kakao-mobile {
display: block; display: block;
width: 100%; width: 100%;
padding: 0.85rem; padding: 0.85rem;
background: linear-gradient(135deg, #FFE812 0%, #FDD835 100%); background: #FFE812;
color: #000; color: #000;
text-decoration: none; text-decoration: none;
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-weight: 700; font-weight: 600;
text-align: center; text-align: center;
border: none; border: none;
cursor: pointer; cursor: pointer;
font-size: 0.95rem; font-size: 0.95rem;
transition: all var(--transition-fast); transition: background var(--transition-fast);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
letter-spacing: 0.3px;
} }
.btn-kakao-mobile:hover { .btn-kakao-mobile:hover {
background: linear-gradient(135deg, #FDD835 0%, #FBC02D 100%); background: #FDD835;
text-decoration: none; text-decoration: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
} }
body.with-mobile-cta { body.with-mobile-cta {
@@ -379,24 +367,26 @@ body.with-mobile-cta {
} }
.navbar-brand { .navbar-brand {
font-weight: 800; font-weight: 700;
color: var(--color-primary) !important; color: var(--color-primary) !important;
font-size: 1.35rem; font-size: 1.25rem;
letter-spacing: -0.5px;
} }
.nav-link { .nav-link {
color: var(--color-text) !important; color: var(--color-text) !important;
font-weight: 600; font-weight: 500;
transition: all var(--transition-fast); transition: color var(--transition-fast);
margin: 0 var(--spacing-sm); margin: 0 var(--spacing-sm);
letter-spacing: 0.2px;
} }
.nav-link:hover { .nav-link:hover {
color: var(--color-primary) !important; color: var(--color-primary) !important;
} }
.nav-link.active {
color: var(--color-cta) !important;
}
/* ===== 반응형 ===== */ /* ===== 반응형 ===== */
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
h1 { font-size: 1.75rem; } h1 { font-size: 1.75rem; }
@@ -484,6 +474,10 @@ body.with-mobile-cta {
} }
/* ===== 일반 유틸리티 ===== */ /* ===== 일반 유틸리티 ===== */
.text-primary {
color: var(--color-primary) !important;
}
.text-muted { .text-muted {
color: var(--color-text-light) !important; color: var(--color-text-light) !important;
} }
@@ -522,7 +516,7 @@ img {
.service-card .card-title { .service-card .card-title {
font-size: 1.4rem; font-size: 1.4rem;
margin-bottom: 1rem; margin-bottom: 1rem;
color: var(--color-text); color: var(--color-primary);
} }
.service-card ul li { .service-card ul li {
@@ -538,20 +532,20 @@ img {
.blog-placeholder { .blog-placeholder {
height: 180px; height: 180px;
background: linear-gradient(135deg, rgba(200, 157, 110, 0.1) 0%, rgba(46, 92, 78, 0.1) 100%); background: rgba(27, 79, 138, 0.08);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 4rem; font-size: 4rem;
color: rgba(200, 157, 110, 0.3); color: rgba(27, 79, 138, 0.3);
} }
.blog-card:hover .blog-placeholder { .blog-card:hover .blog-placeholder {
background: linear-gradient(135deg, rgba(200, 157, 110, 0.2) 0%, rgba(46, 92, 78, 0.2) 100%); background: rgba(27, 79, 138, 0.14);
} }
.bg-primary-badge { .bg-primary-badge {
background-color: rgba(200, 157, 110, 0.15) !important; background-color: rgba(27, 79, 138, 0.1) !important;
color: var(--color-primary) !important; color: var(--color-primary) !important;
} }
@@ -581,7 +575,7 @@ img {
/* ===== 시즌 Hero ===== */ /* ===== 시즌 Hero ===== */
.hero-section--seasonal { .hero-section--seasonal {
background: linear-gradient(135deg, #1F3A30 0%, #2E5C4E 60%, #3D7A68 100%); background: linear-gradient(135deg, #133970 0%, #1B4F8A 60%, #2E5FA3 100%);
} }
.bg-danger-badge { .bg-danger-badge {
background-color: rgba(198, 40, 40, 0.85) !important; background-color: rgba(198, 40, 40, 0.85) !important;
@@ -599,9 +593,8 @@ img {
height: 220px; height: 220px;
border-radius: 50%; border-radius: 50%;
border: 4px solid rgba(255,255,255,0.25); border: 4px solid rgba(255,255,255,0.25);
background: rgba(255,255,255,0.08); background: rgba(255,255,255,0.1);
color: white; color: white;
backdrop-filter: blur(4px);
} }
.deadline-label { .deadline-label {
font-size: 0.85rem; font-size: 0.85rem;
@@ -649,7 +642,7 @@ img {
} }
.seasonal-blog-tag { .seasonal-blog-tag {
display: inline-block; display: inline-block;
background: linear-gradient(135deg, #C62828 0%, #B71C1C 100%); background: var(--color-cta);
color: white; color: white;
font-size: 0.82rem; font-size: 0.82rem;
font-weight: 700; font-weight: 700;
@@ -723,7 +716,7 @@ img {
padding: 1.1rem 1.5rem; padding: 1.1rem 1.5rem;
} }
.faq-question:not(.collapsed) { .faq-question:not(.collapsed) {
color: var(--color-secondary); color: var(--color-primary);
background: white; background: white;
box-shadow: none; box-shadow: none;
} }
@@ -731,10 +724,10 @@ img {
filter: none; filter: none;
} }
.faq-question:focus { .faq-question:focus {
box-shadow: 0 0 0 3px rgba(200, 157, 110, 0.2); box-shadow: 0 0 0 3px rgba(27, 79, 138, 0.2);
} }
.faq-answer { .faq-answer {
background: #fdfcfa; background: #F7F9FC;
color: var(--color-text-light); color: var(--color-text-light);
line-height: 1.85; line-height: 1.85;
padding: 1rem 1.5rem 1.25rem; padding: 1rem 1.5rem 1.25rem;
TaxBaik.Web/wwwroot/maintenance.html
+10 -10
View File
@@ -8,8 +8,8 @@
<style> <style>
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; }
body { body {
background: #F9F7F3; background: #F7F9FC;
color: #3D2817; color: #1A1A2E;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -23,12 +23,12 @@
background: #fff; background: #fff;
border-radius: 16px; border-radius: 16px;
padding: 3rem 2.5rem; padding: 3rem 2.5rem;
box-shadow: 0 8px 32px rgba(61,40,23,.10); box-shadow: 0 8px 32px rgba(0,0,0,.10);
} }
.icon { font-size: 3.5rem; margin-bottom: 1.25rem; } .icon { font-size: 3.5rem; margin-bottom: 1.25rem; }
.badge { .badge {
display: inline-block; display: inline-block;
background: #C89D6E; background: #1B4F8A;
color: #fff; color: #fff;
font-size: 0.78rem; font-size: 0.78rem;
font-weight: 700; font-weight: 700;
@@ -37,13 +37,13 @@
border-radius: 20px; border-radius: 20px;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
h1 { font-size: 1.6rem; color: #2E5C4E; font-weight: 800; margin-bottom: 1rem; line-height: 1.35; } h1 { font-size: 1.6rem; color: #1B4F8A; font-weight: 800; margin-bottom: 1rem; line-height: 1.35; }
p { color: #6B5D4F; line-height: 1.85; font-size: 0.95rem; } p { color: #5A6A7A; line-height: 1.85; font-size: 0.95rem; }
.divider { border: none; border-top: 1px solid #EFE9DD; margin: 1.75rem 0; } .divider { border: none; border-top: 1px solid #D8E2EE; margin: 1.75rem 0; }
.kakao-btn { .kakao-btn {
display: inline-block; display: inline-block;
background: #FEE500; background: #FEE500;
color: #3D2817; color: #1A1A2E;
text-decoration: none; text-decoration: none;
font-weight: 700; font-weight: 700;
padding: 0.65rem 1.5rem; padding: 0.65rem 1.5rem;
@@ -51,8 +51,8 @@
font-size: 0.95rem; font-size: 0.95rem;
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.timer { font-size: 0.78rem; color: #A09080; margin-top: 1.5rem; } .timer { font-size: 0.78rem; color: #8A99A8; margin-top: 1.5rem; }
.footer { font-size: 0.75rem; color: #C0ADA0; margin-top: 2rem; } .footer { font-size: 0.75rem; color: #A8B5C2; margin-top: 2rem; }
</style> </style>
</head> </head>
<body> <body>