@charset "utf-8";

/* ==========================================
   1. 폰트 적용 (Pretendard)
========================================== */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

/* ==========================================
   2. 색상 변수 세팅 (Root)
========================================== */
:root {
    --white: #fff;
    --black: #222;
    --navy: #0F3D8D;
    --gray: #64748B;
    --dim-gray: #F9FAFB;
    --point-color: #FF3146;
    
    /* 롤링 애니메이션 높이 변수화 (반응형 최적화) */
    --ticker-h: 24px; 
}
@media screen and (min-width: 1024px) {
    :root {
        --ticker-h: 30px; 
    }
}

/* ==========================================
   3. 공통 초기화 및 기본 틀 (Reset & Common)
========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Pretendard', sans-serif;
}
body {
    color: var(--black);
    background-color: var(--white);
    font-weight: 300;
    line-height: 1.5;
    word-break: keep-all;
}
ul, ol, li { list-style: none; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; vertical-align: middle; }
button, input { border: none; background: none; font-family: 'Pretendard', sans-serif; }
button { cursor: pointer; }

main { width: 100%; overflow: hidden; }
.container { width: 100%; }
section { width: 100%; position: relative; }
.section-inner { width: 100%; margin: 0 auto; }

/* --- 공통 레이아웃 반응형 --- */
@media screen and (min-width: 360px) {
    .section-inner { padding: 0 5vw; }
    .br-pc{display: none;}
    .br-mobile{display: block;}
}
@media screen and (min-width: 1024px) {
    .section-inner { padding: 0 3vw; }
    .br-pc{display: none;}
    .br-mobile{display: block;}
}
@media screen and (min-width: 1440px) {
    .section-inner { max-width: 1200px; padding: 0; }
    .br-pc{display: block;}
    .br-mobile{display: none;}
}

/* ==========================================
   4. Header 관련
========================================== */
header {
    width: 100%;
    background-color: var(--white);
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; margin: 0 auto; }
.logo a { display: block; }
.gnb-list { display: flex; align-items: center; }
.gnb-item { font-weight: 600; color: var(--black); transition: color 0.2s; }
.gnb-item:hover { color: var(--point-color); }

.header-right-group { display: flex; align-items: center; }

/* 헤더 실시간 롤링 (모바일/PC 공용 반응형 최적화) */
.reception-ticker {
    display: flex;
    align-items: center;
    height: var(--ticker-h); 
    background: #f1f5f9;
    border-radius: 50px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 600;
    max-width: 160px; 
}
.ticker-wrap {
    height: var(--ticker-h);
    overflow: hidden;
}
.ticker-list {
    animation: ticker-rolling 12s linear infinite;
    text-align: center;
}
.ticker-item {
    height: var(--ticker-h);
    line-height: var(--ticker-h);
    white-space: nowrap;
}
.ticker-item .name { color: var(--black); font-weight: 700; }
.ticker-item .telecom { color: var(--gray); }
.ticker-item .status { color: var(--point-color); font-weight: 800; }

@keyframes ticker-rolling {
    0%, 15%  { transform: translateY(0); }
    20%, 35%  { transform: translateY(calc(var(--ticker-h) * -1)); }
    40%, 55%  { transform: translateY(calc(var(--ticker-h) * -2)); }
    60%, 75%  { transform: translateY(calc(var(--ticker-h) * -3)); }
    80%, 95%  { transform: translateY(calc(var(--ticker-h) * -4)); }
    100% { transform: translateY(calc(var(--ticker-h) * -5)); }
}

.member-utils { display: flex; align-items: center; }
.member-greeting { color: var(--gray); }
.member-greeting .highlight { color: var(--point-color); }
.btn-login, .btn-modify { color: var(--gray); font-weight: 600; }
.btn-register, .btn-logout { background-color: var(--point-color); color: var(--white); font-weight: 600; text-align: center; }

.btn-mobile-menu { display: flex; flex-direction: column; justify-content: space-between; width: 24px; height: 18px; padding: 0; margin-left: 10px; }
.btn-mobile-menu .bar { width: 100%; height: 2px; background-color: var(--black); border-radius: 2px; }

/* 👇 가상요소(::before)를 활용한 모바일 슬라이드 메뉴 애니메이션 완벽 분리 👇 */
.mobile-slide-menu { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh; 
    z-index: 2000; 
    display: flex; 
    justify-content: flex-end;
    visibility: hidden; /* 평소엔 아예 클릭 안 되게 숨김 */
}
.mobile-slide-menu::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.5); 
    opacity: 0; 
    transition: opacity 0.3s ease; 
}
.mobile-slide-menu.active { visibility: visible; }
.mobile-slide-menu.active::before { opacity: 1; pointer-events: auto; }

.mobile-slide-content { 
    position: relative; 
    width: 80%; 
    max-width: 320px; 
    height: 100%; 
    background: var(--white); 
    z-index: 10; 
    display: flex; 
    flex-direction: column; 
    box-shadow: -5px 0 15px rgba(0,0,0,0.1); 
    transform: translateX(100%); /* 처음엔 우측 바깥으로 밀어둠 */
    transition: transform 0.3s ease; 
}
.mobile-slide-menu.active .mobile-slide-content { transform: translateX(0); /* 메뉴 활성화 시 제자리로 스르륵 */ }
/* 👆 애니메이션 완벽 분리 완료 👆 */

.mobile-slide-header { padding: 20px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: flex-start; }
.btn-mobile-close { font-size: 32px; line-height: 1; color: var(--gray); padding: 0; }
.mobile-member-utils { display: flex; flex-direction: column; gap: 12px; }
.mobile-member-utils .member-greeting { font-size: 16px; color: var(--black); }
.mobile-member-utils .utils-link { display: flex; gap: 8px; }
.mobile-member-utils .btn-modify, .mobile-member-utils .btn-login { font-size: 13px; padding: 8px 14px; border: 1px solid #cbd5e1; border-radius: 4px; color: var(--black); font-weight: 600;}
.mobile-member-utils .btn-logout, .mobile-member-utils .btn-register { font-size: 13px; padding: 8px 14px; background: var(--point-color); color: var(--white); border-radius: 4px; border: 1px solid var(--point-color); font-weight: 600;}

.mobile-gnb { padding: 10px 20px; }
.mobile-gnb-list { display: flex; flex-direction: column; gap: 0; }
.mobile-gnb-item { border-bottom: 1px solid #f1f5f9; }
.mobile-gnb-link { display: block; padding: 18px 0; font-size: 18px; font-weight: 700; color: var(--black); }


/* --- Header 반응형 --- */
@media screen and (min-width: 360px) {
    .header-inner { padding: 15px 5vw; flex-wrap: wrap; }
    .logo img { height: 24px; }
    
    .gnb { display: none; } 
    .member-utils { display: none; } 
    
    .header-right-group { gap: 5px; } 
}
@media screen and (min-width: 1024px) {
    .header-inner { padding: 20px 3vw; flex-wrap: nowrap; }
    .logo img { height: 32px; }
    
    .gnb { display: block; }
    .gnb-list { gap: 30px; }
    .gnb-link { font-size: 16px; }
    
    .member-utils { display: flex; gap: 16px; font-size: 14px; } 
    .btn-mobile-menu { display: none; } 
    .mobile-slide-menu { display: none; } 
    
    .reception-ticker { padding: 0 20px; font-size: 13px; max-width: none; }
    .header-right-group { gap: 20px; } 
    .member-greeting { margin-right: 10px; }
    .btn-login, .btn-modify { padding: 8px 0; }
    .btn-register, .btn-logout { padding: 8px 16px; }
}
@media screen and (min-width: 1440px) {
    .header-inner { max-width: 1200px; padding: 24px 0; }
    .logo img { height: 36px; }
    .gnb-list { gap: 50px; }
    .gnb-link { font-size: 18px; }
    
    .header-right-group { gap: 30px; } 
    
    .member-utils { gap: 20px; font-size: 15px; }
    .member-greeting { margin-right: 15px; }
    .btn-login, .btn-modify { padding: 10px 0; }
    .btn-register, .btn-logout { padding: 10px 20px; border-radius: 6px; }
}

/* ==========================================
   5. intro 관련 (Hero Section)
========================================== */
.intro {
    position: relative;
    color: var(--white);
    width: 100%;
    background: url('../img/intro-bg.png');
}
.intro::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0F3D8D;
    opacity: 0.8;
    z-index: 30;
}
.intro .section-inner{position: relative; z-index: 50;}
.intro-left{position: relative; display: flex; align-items: center; align-self: stretch;}
.intro-left-content{width: 100%;}
.intro-left-content-badge { display: inline-block; background-color: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; }
.intro-left-content-title .highlight { color: #FFD700; }
.intro-left-content-action a { display: inline-flex; align-items: center; justify-content: center; border-radius: 30px; font-weight: 600;}
.btn-call { background-color: var(--white); color: var(--point-color); }
.btn-kakao { background-color: #FEE500; color: #3C1E1E; }
.intro-left-visual{ animation-name: flap; animation-play-state: running; animation-timing-function: ease-in-out; animation-fill-mode: backwards; animation-duration: 4s; animation-iteration-count: infinite;}
@keyframes flap {
    0%{
        transform: translateY(0%);
    }
    50%{
        transform: translateY(10%);
    }
    100%{
        transform: translateY(0%);
    }
}

.intro-right-box { background-color: var(--white); color: var(--black); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.intro-right-box-title { text-align: center; position: relative;}
.intro-right-box-title::after { content: ''; position: relative; display: block; width: 30%; height: 2px; margin: 10px auto; border-bottom: 2px solid var(--navy);}

/* 폼 공통 스타일 */
.form-group .label { display: block; color: var(--gray); font-weight: 700; }
.form-group .input { width: 100%; border: 1px solid #e2e8f0; border-radius: 6px; }
.phone-wrap { display: flex; align-items: center; justify-content: space-between; }
.phone-wrap .input { width: 30%; text-align: center; }
.radio-wrap { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-btn { flex: 1; cursor: pointer; }
.radio-btn input[type="radio"] { display: none; }
.radio-btn .txt { display: block; text-align: center; border: 1px solid #e2e8f0; border-width: 2px; border-radius: 50px; color: var(--gray); transition: all 0.2s; font-weight: 500; }
.radio-btn input[type="radio"]:checked + .txt { border-color: var(--point-color); border-width: 2px; color: var(--point-color); background-color: rgba(255, 49, 70, 0.05); font-weight: 600; }

/* 신용불량 및 미납 가로 정렬 영역 */
.half-group-wrap { display: flex; flex-direction: column; gap: 0; }
.half-group-wrap .form-group { flex: 1; margin: 0;}

/* 추가된 경고 문구 스타일 */
.form-warning-txt { color: var(--white); font-weight: 600; text-align: center; word-break: keep-all; background-color: var(--black); }

.agree-wrap { display: flex; justify-content: center; color: var(--gray); text-align: center; }
.btn-submit { width: 100%; background-color: var(--point-color); color: var(--white); font-weight: 600; border-radius: 50px; }

/* --- intro 반응형 --- */
@media screen and (min-width: 360px) {
    .intro { padding: 30px 0; }
    .intro .section-inner { display: flex; flex-direction: column; gap: 40px; }
    .intro-left {flex-direction: column; text-align: center; }
    .intro-left-content-badge { padding: 4px 12px; font-size: 14px; margin-bottom: 12px; }
    .intro-left-content-title { font-size: 36px; line-height: 1.2; margin-bottom: 16px; }
    .intro-left-content-desc { font-size: 14px; margin-bottom: 24px; opacity: 0.9; }
    .intro-left-content-action { display: flex; flex-direction: column; gap: 10px; }
    .intro-left-content-action a { padding: 12px 0; font-size: 15px; gap: 10px; }
    .intro-left-content-action a img{ max-width: 15px;}
    .intro-left-visual {max-width: 250px; margin: 30px auto 0; }

    .intro-right-box { padding: 20px 15px; } 
    .intro-right-box-title { font-size: 22px; line-height: 24px; }
    
    .form-group { margin-bottom: 15px; }
    .form-group .label { margin-bottom: 8px; font-size: 13px; line-height: 13px; }
    .form-group .input { padding: 0 10px; height: 42px; font-size: 15px; line-height: 15px; }
    
    .radio-wrap { gap: 5px; } 
    .radio-btn .txt { 
        padding: 8px 2px; 
        font-size: 13px;  
        line-height: 1.2; 
        word-break: keep-all; 
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        min-height: 42px; 
    }
    
    .half-group-wrap { flex-direction: column; gap: 10px; }
    
    .form-warning-txt { font-size: 12px; margin-top: 5px; padding: 5px 15px; line-height: 1.4; margin: 15px 0;}
    
    .agree-wrap { font-size: 12px; margin: 10px 0; }
    .btn-submit { height: 50px; font-size: 20px; }
}
@media screen and (min-width: 1024px) {
    .intro { padding: 40px 0;}
    .intro .section-inner { flex-direction: row; justify-content: space-between; align-items: center; }
    .intro-left {flex-direction: column; flex: 1; text-align: left; padding-right: 40px; position: relative; margin-top: 10px;}
    .intro-left-content-badge { font-size: 18px; padding: 6px 16px; margin-bottom: 20px; }
    .intro-left-content-title { font-size: 40px; }
    .intro-left-content-desc { font-size: 16px; margin-bottom: 30px; }
    .intro-left-content-action { flex-direction: row; gap: 15px; }
    .intro-left-content-action a { padding: 14px 24px; width: auto; gap: 10px; }
    .intro-left-content-action a img{ max-width: 20px;}
    .intro-left-visual {position: relative; right: 0; bottom: -50px; max-width: 300px; margin: 0;}

    .intro-right { flex: 0 0 550px; }
    .intro-right-box { padding: 32px; }
    .intro-right-box-title { font-size: 28px; line-height: 28px; }
    
    .form-group { margin-bottom: 20px; }
    .form-group .label { margin-bottom: 8px; font-size: 14px; line-height: 14px; }
    .form-group .input { padding: 0 10px; height: 42px; font-size: 18px; line-height: 18px; }
    .radio-btn .txt { padding: 9px 0; font-size: 18px; line-height: 18px; display: block; }
    
    .half-group-wrap { flex-direction: row; gap: 20px; }
    .form-warning-txt { font-size: 12px; margin-top: 0; padding: 10px; line-height: 12px; margin: 8px 0;}
    .agree-wrap { font-size: 13px; margin: 10px 0; }
    .btn-submit { height: 55px; font-size: 28px; }
}
@media screen and (min-width: 1440px) {
    .intro { padding: 50px 0; }
    .intro-left{flex-direction: row; margin:0;}
    .intro-left-content-title { font-size: 52px; margin-bottom: 24px; }
    .intro-left-content-desc { font-size: 20px; margin-bottom: 40px; }
    .intro-left-visual {position: absolute; right: 10px; max-width: 300px; bottom: 0;}
    
    .agree-wrap .checkbox-btn span{display: inline-block; transform: translateY(2px); margin-left: 5px;}
    .form-group .label { margin-bottom: 8px; font-size: 16px; line-height: 16px; }
    .form-warning-txt { font-size: 14px;  line-height: 14px; margin: 10px 0;}
}

/* ==========================================
   모바일 전용 140만원 띠 배너
========================================== */

/* 1. PC 화면에서는 기본적으로 숨김 처리 */
.mobile-only-banner {
    display: none; 
}

/* 2. 모바일 화면(보통 1023px 이하)에서만 노출 */
@media screen and (max-width: 1023px) {
    .mobile-only-banner {
        display: block; /* 모바일에서 보이게 전환 */
        background: var(--primary-blue, #0044b6); /* 파란색 배경 */
        color: #fff;
        text-align: center;
        padding: 18px 20px;
        margin: 40px 20px 0; /* 좌우 여백과 sec01과의 간격 띄우기 */
        border-radius: 12px; /* 둥근 모서리 */
        box-shadow: 0 4px 15px rgba(0, 68, 182, 0.2); /* 살짝 그림자 추가 */
    }
    
    .mobile-only-banner>div {
        margin: 0;
        font-size: 16px;
        font-weight: 500;
    }
    .mobile-only-banner .sub-title{
        font-size: 16px;
        margin-bottom: 5px;
    }
    .mobile-only-banner .highlight {
        color: var(--point-yellow, #ffc600); /* 눈에 띄는 노란색 */
        font-size: 30px;
        line-height: 30px;
        font-weight: 900;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: 10px;
        margin-top: 4px;
    }
    .mobile-only-banner .highlight img{
        display: inline-block;
        max-height: 50px;
    }
}

/* ==========================================
   6. sec01 관련 (인기 추천 결합 상품)
========================================== */
.sec01 { background-color: var(--white); }
.sec01-header { display: flex; justify-content: space-between; align-items: flex-end; }
.sec01-header .sub { display: block; color: var(--gray); font-weight: 600; }
.sec01-header .title { color: var(--black); font-weight: 800;}
.btn-more { display: inline-block; color: var(--black); border: none; font-weight: 600;}
.card .thumb{ display: flex; align-items: center; justify-content: center;}

.sec01-content-list .card { border: 1px solid #e2e8f0; border-radius: 12px; text-align: center; transition: transform 0.3s, border-color 0.3s; }
.sec01-content-list .card:hover { transform: translateY(-5px); border-color: var(--point-color); }
.card .name { font-weight: 800; text-align: left;}
.card .desc { color: var(--gray); text-align: left; word-break: keep-all;}
.card .price { font-weight: 600; color: var(--black); text-align: left;}
.card .price .highlight { color: var(--point-color); }
.btn-detail { display: block; border: 1px solid var(--point-color); color: var(--point-color); border-radius: 20px; font-weight: 600; }

/* --- sec01 반응형 --- */
@media screen and (min-width: 360px) {
    .sec01 { padding: 60px 0; }
    .sec01-header { margin-bottom: 30px; }
    .sec01-header .sub { font-size: 13px; margin-bottom: 8px; }
    .sec01-header .title { font-size: 24px; margin-bottom: 15px; }
    .btn-more {font-size: 12px; }
    
    .sec01-content-list { display: grid; grid-template-columns: 1fr; gap: 20px; }
    .sec01-content-list .card { padding: 30px 20px; }
    .card .thumb { height: 80px; margin-bottom: 20px; padding: 10px 0;}
    .card .thumb img { max-height: 100%; }
    .card .name { font-size: 18px; margin-bottom: 10px; }
    .card .desc { font-size: 13px; margin-bottom: 15px; }
    .card .price { font-size: 16px; margin-bottom: 20px; }
    .card .price .highlight { font-size: 20px; }
    .btn-detail { padding: 10px 0; font-size: 14px; margin: 0 20px; }
}
@media screen and (min-width: 1024px) {
    .sec01 { padding: 100px 0; }
    .sec01-header { margin-bottom: 50px; position: relative; }
    .sec01-header .sub { font-size: 20px; font-weight: 600;}
    .sec01-header .title { font-size: 32px; }
    .btn-more { position: absolute; right: 0; bottom: 0;font-size: 14px; }
    .sec01-content-list { grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .sec01-content-list .card { padding: 20px; }
    .card .price .highlight { font-size: 26px; }
    .card .name { font-size: 22px; margin-bottom: 10px; }
    .card .desc { font-size: 15px; margin-bottom: 15px; }
    .btn-detail { padding: 10px 0; font-size: 18px; margin: 0 20px; }
}
@media screen and (min-width: 1440px) {
    .sec01-content-list { gap: 10px; }
    .sec01-header .title { margin: 0;}
    .sec01-header .sub { margin: 0;}
    .card .thumb { height: 120px; margin-bottom: 20px; padding: 10px 0;}
    .card .thumb img { max-height: 100%; object-fit: contain;}
    .card .price .highlight { font-size: 30px; }
    .card .desc { font-size: 18px; margin-bottom: 15px; line-height: 24px; }
}

/* ==========================================
   7. sec02 관련 (혜택 영역)
========================================== */
.sec02 { background-color: var(--dim-gray); }
.sec02-header { text-align: center; }
.sec02-header .sub { display: block; color: var(--gray); font-weight: 600; }
.sec02-header .title { color: var(--black); font-weight: 800; }
.sec02-content-list .card { background-color: var(--white); border-radius: 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 4px 20px rgba(0,0,0,0.03); }
.sec02-content-list .info .title { font-weight: 800; color: var(--black); }
.sec02-content-list .info .desc { color: var(--gray); }
.sec02-content-list .thumb {margin: 0;}

/* --- sec02 반응형 --- */
@media screen and (min-width: 360px) {
    .sec02 { padding: 60px 0; }
    .sec02-header { margin-bottom: 30px; }
    .sec02-header .sub { font-size: 13px; margin-bottom: 8px; }
    .sec02-header .title { font-size: 24px; }
    
    .sec02-content-list { display: grid; grid-template-columns: 1fr; gap: 15px; }
    .sec02-content-list .card { padding: 24px; flex-direction: column-reverse; text-align: center; gap: 20px; }
    .sec02-content-list .info .title { font-size: 24px; margin-bottom: 12px; }
    .sec02-content-list .info .desc { font-size: 14px; }
    .sec02-content-list .thumb { max-width: 120px; height: 160px;}
    .item-full .thumb { max-width: 300px; height: 150px;}
}

@media screen and (min-width: 1024px) {
    .sec02 { padding: 100px 0; }
    .sec02-header { margin-bottom: 50px; }
    .sec02-header .sub { font-size: 20px; font-weight: 600;}
    .sec02-header .title { font-size: 32px; }
    
    .sec02-content-list { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .sec02-content-list .item-full { grid-column: 1 / 3; }
    .sec02-content-list .card { padding: 40px; flex-direction: row; text-align: left; }
    .sec02-content-list .info .title { font-size: 28px; margin-bottom: 16px; }
    .sec02-content-list .info .desc { font-size: 15px; }
    .sec02-content-list .thumb { max-width: 150px; height: 160px;}
    .item-full .thumb { max-width: 600px; height: 200px;}
}
@media screen and (min-width: 1440px) {
    .sec02-content-list { gap: 30px; }
    .sec02-content-list .card { padding: 50px; }
}

/* ==========================================
   8. sec03 관련 (가입 절차)
========================================== */
.sec03 { background-color: var(--white); }
.sec03-header { text-align: center; }
.sec03-header .title { color: var(--black); font-weight: 800; }
.process-card { text-align: center; background-color: var(--white); border: 1px solid #e2e8f0; border-radius: 16px; height: 100%; }
.process-card .step-title { font-weight: 800; color: var(--black); }
.process-card .desc { color: var(--gray); font-weight: 500;}
.sec03-content-list .item:not(:last-child)::after{padding-top: 10%;}

/* --- sec03 반응형 --- */
@media screen and (min-width: 360px) {
    .sec03 { padding: 60px 0; }
    .sec03-header { margin-bottom: 40px; }
    .sec03-header .title { font-size: 24px; }
    
    .sec03-content-list { display: flex; flex-direction: column; gap: 20px; }
    .process-card { padding: 30px 10px; }
    .process-card .thumb { width: 60px; height: 60px; margin: 0 auto 20px; }
    .process-card .step-title { font-size: 22px; line-height: 22px; margin: 12px 0; }
    .process-card .desc { font-size: 14px; }
}
@media screen and (min-width: 1024px) {
    .sec03 { padding: 100px 0; }
    .sec03-header { margin-bottom: 60px; }
    .sec03-header .title { font-size: 32px; }
    .sec03-content-list { flex-direction: row; gap: 30px; justify-content: space-between; }
    .sec03-content-list .item { flex: 1; position: relative; max-width: 280px;}
    .sec03-content-list .item:not(:last-child)::after {content: ''; position: absolute; right: -25px; top: 50%; transform: translateY(-50%); background: url(../../basic/img/next-arrow.svg) no-repeat; display: block; min-width: 70px; background-size:contain;}
    .process-card { padding: 40px 10px; }
    .process-card .thumb { width: 80px; height: 80px; margin-bottom: 24px; }
    .process-card .step-title { font-size: 26px; line-height: 26px; margin: 28px 0 16px; }
    .process-card .desc{ font-size: 16px; }
}
@media screen and (min-width: 1440px) {
    .sec03-content-list { gap: 50px; }
    .sec03-content-list .item{ max-width: 320px; }
    .sec03-content-list .item:not(:last-child)::after { right: -110px; min-width: 30%;}
}

/* ==========================================
   9. sec04 관련 (후기/리뷰 Swiper)
========================================== */
.sec04 { background-color: var(--dim-gray); display: flex; flex-direction: column; justify-content: center;}
.sec04 .swiper{height: 100%;}
.sec04 .swiper-pagination{bottom: 0;}
.sec04 .sec04-content{ display: block; }
.review-box { text-align: center; }
.review-box .stars img { width: 20px; height: 20px; margin: 0 2px; }
.review-box .review-desc { font-weight: 600; color: var(--black); }
.review-box .review-author { color: var(--gray); }

/* --- sec04 반응형 --- */
@media screen and (min-width: 360px) {
    .sec04 { padding: 20px 0; }
    .sec04 .swiper{ margin-top: 20px;}
    .sec04 .sec04-content{min-height: 150px;}
    .review-box .stars { margin-bottom: 16px; }
    .review-box .review-desc { font-size: 18px; line-height: 1.4; margin-bottom: 20px; }
    .review-box .review-author { font-size: 14px; }
}
@media screen and (min-width: 1024px) {
    .sec04 { padding: 50px 0; min-height: 350px;}
    .sec04 .swiper{ margin-top: 40px;}
    .sec04 .sec04-content{min-height: 250px;}
    .review-box .stars { margin-bottom: 20px; }
    .review-box .review-desc { font-size: 24px; margin-bottom: 30px; }
    .review-box .review-author { font-size: 16px; }
}

/* ==========================================
   10. sec05 관련 (CTA 배너)
========================================== */
.sec05 { position: relative; background: url(../../basic/img/sec05-bg.png)no-repeat;background-size: cover;background-position-y: center ; color: var(--white);}
.sec05::after{ content: ''; position: absolute; background-color: #000; width: 100%; height: 100%; z-index: 10; opacity: 0.6; top: 0; left: 0;}
.sec05 .section-inner{position:relative; z-index: 200;}
.sec05-box { display: flex; align-items: center; justify-content: space-between;}
.sec05-box-info .sub { width: fit-content; background-color: #fff; border-radius: 50px; }
.sec05-box-info .sub span { color: var(--navy); font-weight: 600;}
.sec05-box-info .title { font-weight: 800; }
.sec05-box-info .time { color: var(--white); }
.sec05-box-info .btn-call { display: flex; align-items: center; background-color: #22C55E; border-radius: 30px; width: fit-content;}
.sec05-box-info .btn-call .btn-call-txt{ display: inline-flex; flex-direction: column; align-items: flex-start; color: var(--white); }
.btn-call .txt { font-weight: 600; }
.btn-call .num { font-weight: 800; }

/* --- sec05 반응형 --- */
@media screen and (min-width: 360px) {
    .sec05 { padding: 40px 0 80px; }
    .sec05-box { padding: 20px 0; flex-direction: column; text-align: center; gap: 30px; }
    .sec05-box-info .sub { font-size: 14px; margin-bottom: 10px; padding: 5px 20px; }
    .sec05-box-info .title { font-size: 28px; line-height: 1.3; margin-bottom: 5px; }
    .sec05-box-info .time { font-size: 20px; margin-bottom: 25px; }
    .sec05-box-info .btn-call { padding: 14px 24px; gap: 15px;}
    .sec05-box-info .btn-call .btn-call-txt{gap: 5px;}
    .btn-call .txt { font-size: 18px; line-height: 18px;}
    .btn-call .num { font-size: 24px; line-height: 24px;}
    .sec05-box-visual { max-width: 150px; }
}
@media screen and (min-width: 1024px) {
    .sec05 { padding: 50px 0; }
    .sec05-box { padding: 0px; flex-direction: row; text-align: left; }
    .sec05-box-info .sub { font-size: 20px; margin-bottom: 12px; padding: 5px 20px; }
    .sec05-box-info .title { font-size: 36px; margin-bottom: 10px; }
    .sec05-box-info .time { font-size: 24px; margin-bottom: 30px; }
    .sec05-box-info .btn-call { padding: 20px 32px; gap: 25px;}
    .sec05-box-info .btn-call .btn-call-txt{gap: 5px;}
    .btn-call .txt { font-size: 24px; line-height: 24px; }
    .btn-call .num { font-size: 30px; line-height: 30px; }
    .sec05-box-visual { max-width: 250px; margin: 0; }
}

/* ==========================================
   11. Footer 관련
========================================== */
.footer { background-color: #1a428a; color: #94a3b8; }
.footer-inner { margin: 0 auto; display: flex; flex-direction: column; }
.footer-top { display: flex; justify-content: space-between; align-items: center; border: none; }
.footer-social { display: flex; gap: 10px; }
.footer-social a{border-radius: 100px; background-color: #fff; position: relative;}
.footer-social a img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.footer-social .icon-sns .icon-insta{ padding: 16px; mask-image: url(../../basic/img/icon-insta.svg); mask-size: contain; background-color: #1a428a; mask-repeat: no-repeat; mask-position: center center;}
.footer-social .icon-sns .icon-youtu{ padding: 16px; mask-image: url(../../basic/img/icon-youtube.svg); mask-size: contain; background-color: #1a428a; mask-repeat: no-repeat; mask-position: center center;}
.footer-info .info-text { line-height: 1.8; font-weight: 500; }
.footer-info .bar { margin: 0 10px; opacity: 0.5; }
.footer-bottom { display: flex; width: 100%; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.1); }
.footer-links a { color: var(--white); transition: color 0.3s; }
.footer-links a:hover { color: var(--point-color); }
.footer-links .privacy { font-weight: 600; }
.footer-links .bar { margin: 0 15px; opacity: 0.5; }

/* --- Footer 반응형 --- */
@media screen and (min-width: 360px) {
    .footer { padding: 40px 0; }
    .footer-inner { padding: 0 5vw; gap: 30px; }
    .footer-top { padding-bottom: 5px; flex-direction: column; gap: 20px; }
    .footer-social a{padding: 8px;}
    .footer-logo img { height: 40px; }
    .footer-info .info-text { font-size: 14px; line-height: 24px; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; }
    .footer-info .bar { display: none; } /* 모바일에서는 바 숨기고 줄바꿈 느낌으로 */
    .footer-info .info-text span.bar{display: none;}
    .footer-info .info-text span, .footer-info .info-text br { display: block; margin-bottom: 0; }
    .footer-info .info-text span {margin:0 5px;}
    .footer-bottom { padding-top: 20px; flex-direction: column; gap: 15px; text-align: center; }
    .footer-links { font-size: 13px; }
    .copyright { font-size: 12px; }
}
@media screen and (min-width: 1024px) {
    .footer { padding: 60px 0; }
    .footer-inner { padding: 0 3vw; gap: 40px; }
    .footer-top { padding-bottom: 10px; flex-direction: row; }
    .footer-social a{padding: 10px;}
    .footer-logo img { height: 36px; }
    .footer-info .info-text { font-size: 16px; text-align: left; margin-bottom: 10px; display: inline-block; }
    .footer-info .bar { display: inline; }
    .footer-info .info-text span.bar{display: inline-block;}
    .footer-info .info-text span, .footer-info .info-text br { display: inline; margin-bottom: 0; }
    .footer-info .info-text span {margin-left: 0px;}
    .footer-info .info-text br { display: block; margin: 10px 0; }
    .footer-bottom { padding-top: 30px; flex-direction: row; }
    .footer-links { font-size: 14px; }
    .copyright { font-size: 14px; }
}
@media screen and (min-width: 1440px) {
    .footer-inner { max-width: 1200px; padding: 0; gap: 0px; }
}


/* ============================================================
   장군통신 전용: 로그인 / 회원가입 페이지 리모델링
============================================================ */

/* 공통 처리 */
.mbskin { min-height: calc(100vh - 400px); box-sizing: border-box; display: flex; align-items: center; justify-content: center;  }
.mbskin input[type="text"], .mbskin input[type="password"] { font-family: 'Pretendard', sans-serif !important; }

/* ==========================================
   기본 레이아웃 (모바일 360px 이상 기준)
========================================== */

/* 1. 로그인 폼 */
#mb_login { width: 100%; margin: 30px auto;}
.mbskin_box {background: #fff; padding: 50px 25px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #b5bcc4; box-sizing: border-box; }
#mb_login .mbskin_login_tabs { display: none !important; }

#login_form h1 { font-size: 20px; font-weight: 800; color: #1e293b; text-align: center; margin-bottom: 20px; display: block; }
#login_form h1:after { content: '로그인'; display: block; }

#login_form .frm_input { width: 100%; height: 50px; border-radius: 12px; border: 1px solid #cbd5e1; padding: 0 15px; font-size: 15px; margin-bottom: 15px; box-sizing: border-box; transition: all 0.3s; }
#login_form .frm_input:focus { border-color: #ff3146; box-shadow: 0 0 0 3px rgba(255, 49, 70, 0.1); outline: none; }

#login_form .btn_submit { width: 100%; height: 50px; background: #ff3146; color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 800; cursor: pointer; transition: background 0.3s; margin-top: 10px; }
#login_form .btn_submit:hover { background: #e82a3f; }

#login_form .options { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #64748b; }
#login_form .options label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
#login_form .options a { color: #64748b; text-decoration: none; }

/* 2. 회원가입 (약관동의) - 실제 ID(#fregister)로 수정 완료 */
#fregister { width: 100%; margin: 30px auto; background: #fff; padding: 30px 20px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; box-sizing: border-box; }

#fregister .terms_area, #fregister section { margin-bottom: 30px; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; background: #f8fafc; }
#fregister h2 { font-size: 16px; font-weight: 700; color: #1e293b; margin-bottom: 10px; }
#fregister textarea { width: 100%; height: 120px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 15px; font-size: 13px; line-height: 1.6; color: #475569; resize: none; box-sizing: border-box; }

/* 약관 내 테이블(표) 디자인 깔끔하게 덮어쓰기 */
#fregister .tbl_head01 { border-radius: 8px; overflow: hidden; border: 1px solid #cbd5e1; margin-bottom: 20px; border-top: none; }
#fregister .tbl_head01 table { width: 100%; border-collapse: collapse; }
#fregister .tbl_head01 th { background: #f1f5f9; padding: 12px; font-size: 13px; font-weight: 700; color: #1e293b; border-bottom: 1px solid #cbd5e1; border-right: 1px solid #cbd5e1; text-align: center; }
#fregister .tbl_head01 td { padding: 12px; font-size: 13px; color: #475569; border-bottom: 1px solid #cbd5e1; border-right: 1px solid #cbd5e1; text-align: center; }
#fregister .tbl_head01 th:last-child, #fregister .tbl_head01 td:last-child { border-right: none; }
#fregister .tbl_head01 tr:last-child td { border-bottom: none; }

#fregister .chk_box { text-align: right; margin-top: -10px; margin-bottom: 20px; }
#fregister .chk_box label { font-size: 13px; color: #64748b; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }

#fregister .btn_confirm { margin-top: 30px; display: flex; gap: 10px; justify-content: center; }
#fregister .btn_confirm .btn_submit, #fregister .btn_confirm .btn_cancel { padding: 12px 25px; border-radius: 8px; font-weight: 700; font-size: 14px; text-decoration: none; border: none; cursor: pointer; }
#fregister .btn_confirm .btn_submit { background: #ff3146; color: #fff; }
#fregister .btn_confirm .btn_cancel { background: #94a3b8; color: #fff; }

/* 3. 회원가입 폼 작성 (#fregisterform) */
#fregisterform { width: 100%; margin: 30px auto; background: #fff; padding: 30px 20px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; box-sizing: border-box; }
#fregisterform .form_table { width: 100%; border-collapse: collapse; }
#fregisterform .form_table tr { display: block; margin-bottom: 20px; }
#fregisterform .form_table th { display: block; text-align: left; padding: 0 0 8px 0; font-size: 15px; font-weight: 700; color: #1e293b; width: 100% !important; }
#fregisterform .form_table td { display: block; padding: 0; width: 100% !important; }
#fregisterform .form_table th .sound_only { display: inline-block !important; position: relative !important; font-size: 0 !important; width: auto !important; height: auto !important; }
#fregisterform .form_table th .sound_only:after { content: '*'; color: #ff3146; font-size: 15px; margin-left: 3px; }

#fregisterform .frm_input { width: 100%; height: 50px; border-radius: 10px; border: 1px solid #cbd5e1; padding: 0 15px; font-size: 15px; box-sizing: border-box; transition: all 0.3s; }
#fregisterform .frm_input:focus { border-color: #ff3146; box-shadow: 0 0 0 3px rgba(255, 49, 70, 0.1); }
#fregisterform .frm_info { font-size: 13px; color: #94a3b8; margin-top: 5px; }
#fregisterform .btn_frmline { height: 50px; padding: 0 15px; background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; border-radius: 10px; margin-left: 5px; font-weight: 600; font-size: 13px; cursor: pointer; }

#fregisterform #captcha { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#fregisterform #captcha_img { border-radius: 8px; border: 1px solid #e2e8f0; }

#fregisterform .btn_confirm { margin-top: 30px; border-top: 1px dashed #e2e8f0; padding-top: 20px; text-align: center; }
#fregisterform .btn_confirm .btn_submit { padding: 12px 40px; background: #ff3146; color: #fff; border-radius: 50px; font-weight: 800; font-size: 16px; border: none; cursor: pointer; width: 100%; box-shadow: 0 5px 15px rgba(255, 49, 70, 0.3); }
#fregisterform .btn_confirm .btn_submit:hover { background: #e82a3f; }


/* ==========================================
   반응형 2단계: 태블릿/PC (1024px 이상)
========================================== */
@media screen and (min-width: 1024px) {
    .mbskin { padding: 50px 20px; }
    
    #mb_login { max-width: 450px; margin: auto; padding: 40px; border-radius: 20px; }
    #login_form h1 { font-size: 24px; margin-bottom: 30px; }
    #login_form .frm_input { height: 55px; font-size: 16px; }
    #login_form .btn_submit { height: 55px; font-size: 18px; }
    #login_form .options { font-size: 14px; }

    /* 약관동의 폼 */
    #fregister { max-width: 800px; margin: 50px auto; padding: 40px; border-radius: 20px; }
    #fregister textarea { height: 150px; font-size: 14px; }
    #fregister .chk_box label { font-size: 14px; }
    #fregister .btn_confirm { margin-top: 40px; gap: 15px; }
    #fregister .btn_confirm .btn_submit, #fregister .btn_confirm .btn_cancel { padding: 0px 40px; font-size: 18px; }

    /* 회원가입 정보입력 폼 */
    #fregisterform { max-width: 800px; margin: 50px auto; padding: 40px; border-radius: 20px; }
    #fregisterform .form_table th { font-size: 16px; padding: 0 0 10px 0; }
    #fregisterform .btn_frmline { padding: 0 20px; font-size: 14px; }
    #fregisterform .btn_confirm { margin-top: 50px; padding-top: 30px; }
    #fregisterform .btn_confirm .btn_submit { padding: 15px 60px; font-size: 18px; width: auto; }
}

/* ==========================================
   반응형 3단계: PC 와이드 (1440px 이상)
========================================== */
@media screen and (min-width: 1440px) {
    #mb_login { max-width: 500px; height: 100vh;}
    #fregister { max-width: 900px; }
    #fregisterform { max-width: 900px; }
}

/* ==========================================
   로그인 페이지 커스텀 (로고 디자인 및 폰트 크기 업그레이드)
========================================== */
/* 상단 로고 중앙 정렬 및 크기 지정 */
.mbskin_box .login-logo { 
    text-align: center; 
    margin-bottom: 50px; 
}
.mbskin_box .login-logo img { 
    max-height: 45px; /* 로고 높이 조절 */
}

/* 탭 메뉴(로그인/회원가입) 폰트 크기 업 */
.mbskin_box .mb_log_cate h2, 
.mbskin_box .mb_log_cate .join { 
    font-size: 18px !important; 
    font-weight: 700; 
}

/* 아이디/비번 입력칸 폰트 크기 및 높이 업 */
#login_fs .frm_input { 
    font-size: 16px !important; 
    height: 50px !important; 
}

/* 로그인 버튼 폰트 크기 및 높이 업 */
#login_fs .btn_submit { 
    font-size: 18px !important; 
    font-weight: 800; 
    height: 55px !important; 
}

/* 하단 자동로그인 및 ID/PW 찾기 폰트 크기 업 */
#login_info .login_if_auto label, 
#login_info .login_if_lpl a { 
    font-size: 14px !important; 
}