@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@100..900&display=swap');
@font-face {
    font-family: 'HakgyoansimDunggeunmisoTTF-B';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimDunggeunmisoTTF-B.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'HakgyoansimDunggeunmisoTTF-R';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimDunggeunmisoTTF-R.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

body {box-sizing:border-box;font-family:'HakgyoansimDunggeunmisoTTF-R', 'Noto Sans KR', sans-serif;font-size:16px;line-height:normal;margin:0;padding:0;
	color:#1c1b1f;font-weight:400;}
li {list-style:none;}
button {cursor:pointer;}

header {position:fixed;top:0;left:0;width:100%;z-index:10;background:none;background:#00000012;
    transition:background .3s ease;padding:0!important;border-bottom:1px solid #eee;
    backdrop-filter:blur(5px);}
header.scroll {background:#fffffff0;backdrop-filter:blur(3px);}
header .container {padding:0;height:80px;}
body.fp-viewing-hero header {background:none}
body.fp-viewing-features header {background:#ffffffab;backdrop-filter:blur(5px);}
body.fp-viewing-cta header {background:#ffffff00;backdrop-filter:blur(3px);}
body.fp-viewing-footer header {background:#ffffff00;backdrop-filter:blur(3px);}
header .logo {font-size:0;width:110px;}
header .logo img {display:block;width:100%;filter:brightness(100);}
header nav ul li {height:80px;display:flex;align-items:center;position:relative;}
header nav ul li:hover::before {content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;
    background:#c8e3ffed;}
header nav ul li.active::before {content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;
    background:#1887fded;}
header nav ul li a {color:#fff;}
header nav ul li a:hover {color:#fff;}
header .hd_right {display:flex;gap:10px;}
header .hd_right a {color:#fff;font-size:14px;}
header .hd_right a:hover {background:none;text-decoration:underline;}
header .btn-login {margin:0;background:none;}
header.sub_header {background:#ffffffb0;}
header.sub_header .logo img {filter:none;}
header.sub_header nav ul li a {color:#333;}
header.sub_header .hd_right a {color:#333;}


#mainpage {}
#mainpage .main_bg {background:url('/images/main_bg_1.png')no-repeat top 0 left 50%/cover;}
#mainpage > section {box-sizing:border-box;padding:0;position:relative;}
#mainpage .hero {position:relative;display:flex;align-items:center;background:none;
    padding:180px 0;}
#mainpage .hero .hero_img {width:520px;height:560px;
    background:url('/images/hero_img.png')no-repeat center/contain;}
#mainpage .hero.active .hero_img {top:42%;opacity:1;}
#mainpage .hero svg {width:100%;height:100%;margin:auto;}
#mainpage .hero .container {text-align:left;display:flex;justify-content:space-between;}
#mainpage .hero .txt_box {padding:40px 0 0;}
#mainpage .hero h1 {font-size:74px;margin:0 0 42px;line-height:90px;
    font-family: 'HakgyoansimDunggeunmisoTTF-B';font-weight:700;text-shadow:2px 2px 4px rgb(0 37 169 / 60%);}
#mainpage .hero p {font-size:32px;color:#ceeeff;margin:0;line-height:46px;
    font-family: 'HakgyoansimDunggeunmisoTTF-R';font-weight:400;}

#mainpage .article {background:none;padding:0 0 120px;}
#mainpage .article .article_img {width:380px;height:380px;margin:0 auto 50px;
    box-shadow:5px 5px 15px rgba(0,0,0,0.3);background:url('/images/article_img.png')no-repeat center/340px,linear-gradient(to bottom, #fdfeff, #b8d4ff);border-radius:50px;}
#mainpage .article h2 {font-size:32px;line-height:50px;color:#fff;}
#mainpage .article h2 span {color:#91f3ff;font-size:48px;display:block;margin:0 0 40px;}

#mainpage .features {background:none;padding:50px 0;padding:50px 0 240px;}
#mainpage .features h2 {font-size:36px;line-height:46px;margin:0  0 50px;color:#fff;}
#mainpage .features h2 span {display:block;font-size:24px;margin:5px 0;color:#a6d7fb;font-weight:400;}
#mainpage .features .feature-item {padding:20px 30px;background:#ffffffd1;backdrop-filter:blur(5px);
    box-shadow:4px 4px 15px rgba(0,0,0,0.3);}
#mainpage .features .feature-item h3 {margin:0;padding:0 0 20px;border-color:#ffffff78;color:#4249a9;}
#mainpage .features .feature-item p {color:#333;}


#mainpage .cta {padding:100px 0 150px;
    background:url('/images/cta_bg.png')no-repeat center/cover;}
#mainpage .cta h2 {font-size:36px;line-height:46px;margin:0 0 30px;}
#mainpage .cta h2 span {display:block;font-size:22px;margin:0;color:#a8c3d5;font-weight:400;
    letter-spacing:-0.4px;}
#mainpage .cta .btn_wrap {display:flex;gap:20px;justify-content:center;}
#mainpage .cta .btn_wrap a {position:relative;display:block;width:auto;height:auto;
    background-color:transparent;border:none;cursor:pointer;margin:0;min-width:150px;}
#mainpage .cta .btn_wrap a span {color:rgb(28, 31, 30);border:3px solid #477ee7;
    transition:0.2s;position:relative;display:inline-block;font-size:15px;font-weight:bold;
    text-transform:uppercase;top:0;left:0;width:100%;padding:15px 40px;transition:0.3s;box-sizing:border-box;}
#mainpage .cta .btn_wrap a span:hover {background-color:#f0f4fb;}
#mainpage .cta .btn_wrap a::before, #mainpage .cta .btn_wrap a::after {width:100%;height:3px;
    background-color:#a8c3d5;z-index:2;transition:0.35s;content:'';position:absolute;}
#mainpage .cta .btn_wrap a::before {top:0;right:0;}
#mainpage .cta .btn_wrap a::after {bottom:0;left:0;}
#mainpage .cta .btn_wrap a:hover::before, #mainpage .cta .btn_wrap a:hover::after {width:0%;
    transition:0.2s 0.2s ease-out;}
#mainpage .cta .btn_wrap a span::before, #mainpage .cta .btn_wrap a span::after {width:3px;height:100%;
    background-color:#a8c3d5;z-index:2;transition:0.25s;content:'';position:absolute;}
#mainpage .cta .btn_wrap a span::before {bottom:0;right:-3px;}
#mainpage .cta .btn_wrap a span::after {top:0;left:-3px;}
#mainpage .cta .btn_wrap a span:hover::before, #mainpage .cta .btn_wrap a span:hover::after {height:0%;}





.side_box {position:fixed;bottom:40px;right:25px;z-index:10;display:flex;flex-direction:column;
    gap:13px;padding:10px 6px;background:#00000042;border-radius:100vw;}
.side_box li {list-style:none;}
.side_box li>* {display:block;width:48px;height:48px;border-radius:100vw;background:#eee;
    border:0;}
.side_box li .kakao {background:#f7e409 url('/images/kakao_logo.png')no-repeat center/42px;}
.side_box li .top_scroll {display:flex;flex-direction:column;justify-content:center;font-size:20px;
    color:#173b65;background:#fff;}
.side_box li .top_scroll i {transition:all .3s ease;}
.side_box li .top_scroll:hover i {transform:translateY(-5px);}


footer {background:#eff2fd;padding:0;}
footer .container {padding:40px 0 30px;}
footer .f_logo {display:block;width:140px;margin:0 auto 20px;}
footer .f_logo img {width:100%;}
footer ul {display:flex;flex-direction:column;gap:3px;padding:0;}
footer ul li {color:#3e414d;list-style:none;}
footer .copyright {background:#4c5987;margin:0;padding:8px 0;color:#e0e4f1;}

/* ============================================================
   통일된 버튼 시스템 (모든 페이지 공통)
   ============================================================ */
.btn-primary,
.btn-secondary,
.btn-login,
.btn-danger,
.btn-logout,
.btn-light-red {
    display: inline-block;
    padding: 11px 22px;
    line-height: 1.2;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease;
    border: 1px solid transparent;
    box-sizing: border-box;
    margin: 4px 4px 4px 0;
    vertical-align: middle;
}
.btn-primary:hover,
.btn-secondary:hover,
.btn-login:hover,
.btn-danger:hover,
.btn-logout:hover,
.btn-light-red:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.btn-primary  { background:#1f6feb; color:#fff; }
.btn-primary:hover { background:#1857c0; color:#fff; }

.btn-secondary { background:#6c757d; color:#fff; }
.btn-secondary:hover { background:#525a60; color:#fff; }

.btn-login { background:#28a745; color:#fff; }
.btn-login:hover { background:#1e7e34; color:#fff; }

.btn-danger, .btn-logout { background:#dc3545; color:#fff; }
.btn-danger:hover, .btn-logout:hover { background:#b52a37; color:#fff; }

.btn-light-red { background:#fff5f5; color:#c0392b; border-color:#f8d7d7; }
.btn-light-red:hover { background:#fde8e8; color:#a93226; }

/* ============================================================
   헤더 액션 버튼 (.hd-btn) — 모든 헤더 우측 버튼 통일
   ============================================================ */
header .hd_right { display: flex; gap: 8px; align-items: center; }

header .hd_right .hd-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    height: 36px;
    line-height: 1;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid transparent;
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
    box-sizing: border-box;
    white-space: nowrap;
    margin: 0;
}
header .hd_right .hd-btn i { font-size: 13px; }
header .hd_right .hd-btn:hover { transform: translateY(-1px); }

/* index 페이지(투명 헤더) 위에서의 색상 — 흰 글씨/투명 배경 */
header:not(.sub_header) .hd_right .hd-btn-ghost {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.45);
}
header:not(.sub_header) .hd_right .hd-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
}
header:not(.sub_header) .hd_right .hd-btn-login {
    color: #fff;
    background: rgba(40, 167, 69, 0.85);
    border-color: rgba(40, 167, 69, 1);
}
header:not(.sub_header) .hd_right .hd-btn-login:hover {
    background: #218838;
    color: #fff;
}
header:not(.sub_header) .hd_right .hd-btn-logout {
    color: #fff;
    background: rgba(220, 53, 69, 0.85);
    border-color: rgba(220, 53, 69, 1);
}
header:not(.sub_header) .hd_right .hd-btn-logout:hover {
    background: #c82333;
    color: #fff;
}

/* sub_header(흰 헤더) 위에서의 색상 — 진한 글씨/뚜렷한 배경 */
header.sub_header .hd_right .hd-btn-ghost {
    color: #1f2a44;
    background: transparent;
    border-color: #d6dde7;
}
header.sub_header .hd_right .hd-btn-ghost:hover {
    background: #f0f5ff;
    color: #1f6feb;
    border-color: #1f6feb;
}
header.sub_header .hd_right .hd-btn-login {
    color: #fff;
    background: #28a745;
    border-color: #28a745;
}
header.sub_header .hd_right .hd-btn-login:hover {
    background: #1e7e34;
    color: #fff;
    border-color: #1e7e34;
}
header.sub_header .hd_right .hd-btn-logout {
    color: #fff;
    background: #dc3545;
    border-color: #dc3545;
}
header.sub_header .hd_right .hd-btn-logout:hover {
    background: #b52a37;
    color: #fff;
    border-color: #b52a37;
}

/* 모바일 — 햄버거 메뉴 패널 안에서의 버튼 스타일 */
@media (max-width: 768px) {
    header .hd_right .hd-btn {
        width: 100%;
        height: auto;
        padding: 12px 16px;
        font-size: 14px;
        justify-content: center;
        color: #fff !important;
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.25);
    }
    header .hd_right .hd-btn:hover {
        background: rgba(255, 255, 255, 0.18);
        transform: none;
    }
    header .hd_right .hd-btn-login {
        background: rgba(40, 167, 69, 0.85) !important;
        border-color: #28a745 !important;
    }
    header .hd_right .hd-btn-logout {
        background: rgba(220, 53, 69, 0.85) !important;
        border-color: #dc3545 !important;
    }
}

/* ============================================================
   submit 버튼 통일 (form-group input[type="submit"])
   ============================================================ */
.form-group input[type="submit"] {
    width: 100%;
    padding: 14px;
    background: linear-gradient(90deg, #2f6ce5, #3f8dff);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.form-group input[type="submit"]:hover {
    background: linear-gradient(90deg, #1f58ca, #337ee9);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(46, 109, 229, 0.3);
}

/* ============================================================
   sub_header (비-index 페이지 공통 헤더)
   ============================================================ */
header.sub_header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(15, 30, 60, 0.06);
    border-bottom: 1px solid rgba(15, 30, 60, 0.06);
}
header.sub_header .logo img { filter: none; }
header.sub_header nav ul li a { color: #1f2a44; font-weight: 600; }
header.sub_header nav ul li a:hover { color: #1f6feb; }
header.sub_header nav ul li.active::before { background: #1f6feb; height: 3px; }
header.sub_header .hd_right a { color: #1f2a44; }

/* ============================================================
   subpage-theme 추가 페이지 (mypage, change_password, delete_account, buy)
   에 적용할 폼/카드 스타일 보정
   ============================================================ */
.subpage-theme.account-page .container,
.subpage-theme.mypage-page .container {
    max-width: 800px;
}

.subpage-theme.account-page h2,
.subpage-theme.mypage-page h2 {
    text-align: center;
}

.subpage-theme.account-page .form-container {
    max-width: 520px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 14px;
    padding: 36px 32px;
    box-shadow: 0 14px 30px rgba(6, 27, 71, 0.22);
    border: 1px solid rgba(183, 221, 255, 0.52);
}

.subpage-theme.account-page .form-container h2 {
    color: #1b3566;
    margin-top: 0;
    margin-bottom: 24px;
}

.subpage-theme.account-page .form-container p {
    color: #555;
    text-align: center;
}

.subpage-theme.account-page .form-group input[type="password"],
.subpage-theme.account-page .form-group input[type="text"],
.subpage-theme.account-page .form-group input[type="email"] {
    border: 1px solid #bfd6f5;
    background-color: #f8fbff;
}

/* mypage가 subpage-theme 위에 올라갈 때, 텍스트 색상 보정 */
.subpage-theme.mypage-page > .container > p {
    color: #d3ecff;
    text-align: center;
}

.subpage-theme.mypage-page .user-info,
.subpage-theme.mypage-page .payment-card,
.subpage-theme.mypage-page .webhook-group {
    /* 기존 흰색 카드 그대로 — 어두운 배경 위에 떠있는 효과 */
}

/* 회원탈퇴 버튼 정렬 */
.subpage-theme.mypage-page .delete-account-row {
    text-align: right;
    margin-top: 20px;
}