<data:blog.pageTitle/>
<![CDATA[
/*
-----------------------------------------------
Blogger Template Style
Name: 아로스 홈페이지 스킨 목록
----------------------------------------------- */
/* 기본 스타일 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
margin: 0;
background-color: white;
}
.main-wrapper {
flex: 1 0 auto;
}
.container {
max-width: 768px;
margin: 0 auto;
padding: 8px 8px;
}
.blog-posts.hfeed.container {
margin-top: -30px;
padding: 0;
}
.blog-posts {
max-width: 100%;
margin: 0;
padding: 0;
}
/* 헤더 스타일 수정 */
/* 상단 고정을 위한 스타일 */
body {
padding-top: 120px; /* 헤더와 탭의 전체 높이만큼 여백 추가 */
}
/* 헤더 고정 스타일 */
#header {
position: fixed !important;
top: 0;
left: 0;
width: 100%;
height: 40px !important;
background: white;
z-index: 1000;
margin: 0 !important;
padding: 0 !important;
}
.header {
position: relative;
width: 100%;
background: white;
margin: 4px 0;
}
.header .container {
display: flex;
align-items: center;
justify-content: center;
max-width: 768px;
margin: 0 auto;
height: 24px;
padding: 0;
gap: 4px;
}
/* 로고 스타일 유지 */
.logo {
display: flex;
align-items: center;
height: 24px;
}
.logo img {
height: 30px;
width: auto;
vertical-align: middle;
}
.logo-text {
font-size: 20px;
font-weight: 600;
margin: 0 !important;
padding: 0 !important;
color: #000;
display: flex;
align-items: center;
height: 24px;
line-height: 24px;
}
/* 탭 고정 스타일 */
.tab-wrapper {
position: fixed;
top: 42px;
left: 0;
width: 100%;
background: white;
z-index: 999;
padding: 0;
}
.tab-container {
background: white;
border-radius: 50px;
padding: 2px;
margin: 0 auto; /* 상하 마진 제거 */
max-width: 768px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.tabs {
display: flex;
justify-content: space-between;
list-style: none;
padding: 0;
margin: 0; /* 마진 제거 */
}
.tab-item {
flex: 1;
text-align: center;
}
.tab-link {
display: block;
padding: 12px 6px; /* 좌우 패딩을 더 줄임 */
text-decoration: none;
color: #666;
border-radius: 25px;
transition: all 0.3s ease;
min-height: 42px; /* 최소 높이 설정으로 탭 높이 통일 */
line-height: 1.2; /* 줄간격 조정 */
word-break: keep-all; /* 단어 단위로 줄바꿈 */
font-size: 14px; /* 글자 크기 조정 */
}
.tab-link.active {
background-color: #6528f7;
color: white;
}
@media screen and (max-width: 370px) {
.tab-link {
font-size: 13px; /* 모바일에서 더 작은 글자 크기 */
padding: 12px 4px; /* 패딩 더 줄임 */
}
}
/* 추가 오버라이드 */
#header h1, #header h2 {
margin: 0 !important;
margin-bottom: 0 !important;
padding: 0 !important;
line-height: 24px !important;
}
/* 배경 고정 */
.header::after,
.tab-container::after {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
height: 45px; /* 헤더와 탭의 전체 높이 */
background: white;
z-index: -1;
}
.content-card {
background: #EEF1FF;
border-radius: 20px;
padding: 30px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
.card-title {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
.card-text {
color: #666;
line-height: 1.6;
}
.card-icon {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 4rem;
opacity: 0.8;
display: block;
}
.section-title {
font-size: 1.2rem;
font-weight: bold;
margin: 30px 0 15px 0;
color: #333;
}
.support-grid {
display: grid;
grid-template-columns:48% 48%;
gap: 15px;
margin-bottom: 30px;
width: 100%;
box-sizing: border-box;
}
.support-card {
display: flex;
justify-content: center;
align-items: center;
height: 150px;
padding: 20px;
border-radius: 16px;
text-decoration: none;
color: white;
font-size: 17px;
box-shadow: 4px 6px 10px rgba(0, 0, 0, 0.35);
transition: transform 0.3s ease;
}
.support-card:hover {
transform: translateY(-5px);
}
/* 내부 세로 정렬 */
.support-inner {
display: flex;
flex-direction: column;
justify-content: space-between; /* 상단~하단 자연 정렬 */
align-items: center;
height: 100%;
width: 100%;
gap: 5px; /* 아이콘, 제목, 버튼 사이 간격 */
}
/* 아이콘 */
.support-icon {
font-size: 1.4rem;
}
/* 제목 */
.support-title {
font-size: 17px;
font-weight: bold;
text-align: center;
margin: 0;
}
/* 버튼 */
.support-button {
background: white;
color: black;
font-size: 16px;
font-weight: 600;
padding: 8px 16px;
border-radius: 10px;
white-space: nowrap;
box-shadow:
0 6px 14px rgba(0, 0, 0, 0.35), /* 바깥쪽 음영 */
inset 0 2px 2px rgba(255, 255, 255, 0.8); /* 안쪽 하이라이트 */
transition: all 0.2s ease-in-out;
}
/* 색상 추가 */
.card-blue { background-color: #2196F3; }
.card-teal { background-color: #0B6138; }
.card-purple { background-color: #7E57C2; }
.card-green { background-color: #31B404; }
.card-cyan { background-color: #00BCD4; }
.card-orange { background-color: #FF7043; }
.card-darkblue { background-color: #1a237e; }
.card-purple-light { background-color: #7E57C2; }
.card-teal-dark { background-color: #00695c; }
.card-blue2 { background-color : #2d6cfc; }
.card-lightpurple { background-color : #d99dfc; }
.card-blue3 { background-color : #8080e0; }
.card-blue4 { background-color : #5353db; }
.card-darkgold { background-color: #C0A000; }
.card-amber { background-color: #FFBF00; }
.card-mustard { background-color: #D4AF37; }
.card-bronze { background-color: #CD7F32; }
.card-darkyellow { background-color: #B8860B; }
.card-forestgreen { background-color: #228B22; }
.card-seagreen { background-color: #2E8B57; }
.card-deeppurple { background-color: #6A0DAD; }
.card-violet { background-color: #8A2BE2; }
.card-royalblue { background-color: #4169E1; }
.card-deepskyblue { background-color: #00BFFF; }
.support-icon2 {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 2rem;
}
/* 광고 컨테이너 */
.ad-container {
width: 100%;
margin: 20px 0;
font-size: 0.9rem;
margin-top: 10px;
}
.footer-brand {
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 5px;
color: #1976D2;
}
.footer-info {
list-style: none;
padding: 0;
margin: 0;
}
.footer-info li {
margin-bottom: 2px;
color: #666;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 8px;
}
/* 모바일 대응을 위한 미디어 쿼리 추가 */
@media screen and (max-width: 480px) {
.footer-content {
flex-direction: column;
gap: 20px;
align-items: center; /* 중앙 정렬 추가 */
text-align: center; /* 텍스트 중앙 정렬 */
}
.footer-left {
display: flex;
flex-direction: column;
align-items: center; /* left 내용 중앙 정렬 */
}
.footer-right {
text-align: center; /* right 내용 중앙 정렬 */
width: 100%;
}
.footer-info li {
justify-content: center; /* li 요소들 중앙 정렬 */
}
.footer {
padding: 20px 15px;
}
}
/* 블로거 특화 스타일 */
.post {
display: none;
}
.post-body {
margin: 0;
padding: 0;
}
.date-header {
display: none;
}
.post-title {
display: none;
}
/* 반응형 스타일 */
@media (max-width: 480px) {
.container {
padding: 10px;
}
.tab-link {
padding: 10px 8px;
font-size: 0.9rem;
}
.support-grid {
gap: 10px;
}
.support-card {
height: 150px;
padding: 15px;
}
.support-button {
font-size: 15px;
padding: 7px 14px;
}
.support-inner {
display: flex;
flex-direction: column;
justify-content: space-between; /* 버튼을 아래로 밀어내기 */
align-items: center;
height: 100%; /* ✅ 핵심: 카드 전체 높이 채우기 */
width: 100%;
}
.support-icon {
font-size: 1.4rem;
line-height: 1.2;
}
.support-title {
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 0;
line-height: 1.3;
}
.support-button {
background: white;
color: black;
font-size: 16px;
font-weight: 600;
padding: 8px 16px;
border-radius: 10px;
white-space: nowrap;
box-shadow:
0 6px 14px rgba(0, 0, 0, 0.25), /* 바깥쪽 음영 */
inset 0 2px 2px rgba(255, 255, 255, 0.8); /* 안쪽 하이라이트 */
transition: all 0.2s ease-in-out;
}
.support-icon2 {
font-size: 1.5rem;
bottom: 15px;
right: 15px;
}
.content-card .card-icon {
display: none;
}
.footer {
padding: 8px 0;
margin-top: 15px;
}
.footer-content {
padding: 0 10px;
}
}
@media (min-width: 768px) {
html, body {
height: 100%;
margin: 0;
}
.main-wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
.footer {
flex-shrink: 0;
margin-top: auto;
background: #E3F2FD;
padding: 20px 0;
}
}
/* Noto Sans KR 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');
]]>
true
#ffffff
false
By
true
#ffffff
true
#ffffff
TextAndImage
#ffffff
false
1x1
true
true
true
1
false
#ffffff
false
false
정부 지원금
청년을 위한 지원금!
소상공인을 위한 지원금!
