/* 웹 폰트 적용 (Pretendard 또는 Noto Sans KR 권장) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Pretendard';
    background-color: #f6f6fd; /* 아주 옅은 배경색 */
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    word-break: keep-all;
}
/* 최상단 포인트 라인 */
.top-line {
    width: 100%;
    height:15px;
    background: linear-gradient(90deg, #8c2aaf, #193dd0);
}
/* 메인 콘텐츠 영역 (수직 중앙 정렬) */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
}
.subtitle {
    font-size:36px;
    color: #252525;
    font-weight: 500;
    line-height:1;
    margin-bottom:10px;
}
.title {
    font-size:46px;
    color: #3b207f;
    font-weight:bold;
    letter-spacing: -0.05em;
    margin-bottom:50px;
}
.description {
    font-size: 20px;
    color: #000000;
    line-height:1.5;
    font-weight:300;
    margin-top:20px;
    word-break:keep-all;
}
/* 하단 푸터 영역 */
.footer {
    text-align: center;
}
.footer-logo {
    margin-bottom:25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.footer-logo img {
    width: auto;
    max-width:230px;
}
.contact-info {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin:0 auto 45px auto;
    padding-top:20px;
    gap:30px;
    border-top:1px solid rgba(0,0,0,0.1);
}
.contact-info span, 
.contact-info a {
    font-size:16px;
    color: #6e6e6e;
    font-weight: 600;
    text-decoration:none;    
}
@media screen and (max-width:1080px) {
    .subtitle {font-size:30px;}
    .title {font-size:40px; margin-bottom:35px;}
    .description {font-size:18px;}
    .footer-logo img {width:230px;}
    .contact-info span, .contact-info a {font-size:15px;}
}
@media screen and (max-width:720px) {
    .main-content img {width:140px;}
    .subtitle {font-size:24px; margin-bottom:5px;}
    .title {font-size:30px; margin-bottom:30px;}
    .description {font-size:18px;}
    .footer-logo img {width:230px;}    
    .contact-info {flex-direction:column; gap:10px; padding-top:15px; margin:0 auto 20px auto;}
    .contact-info span,
    .contact-info a {font-size:14px;}
}
@media screen and (max-width:480px) {
    .main-content img {width:110px;}
    .subtitle {font-size:19px; margin-bottom:5px;}
    .title {font-size:24px; margin-bottom:30px;}
    .description {font-size:16px;}
    .footer-logo img {width:180px;}    
}