/**********************************************************************************************
 * 파일명: common.css
 * 저작권:
 *     NOWC-2026-NOWLMS-8F29C3
 *     © 나우컴퍼니(NOWCOMPANY) | https://nowcompany.kr
 *     All rights reserved.
 **********************************************************************************************/

/* =========================================================
   변수 및 리셋
========================================================= */
@charset "utf-8";
@import url('./font/font.css');

:root {
    --p: #0a1931;       /* Deep Navy: 신뢰와 권위 */
    --p-light: #185adb; /* Blue: 기술력 */
    --point: #e63946;   /* Red: 긴급 구조, SOS */
    --text: #2d3436;    /* Dark Gray: 가독성 */
    --bg: #f4f7fa;      /* Light Gray: 전문적인 느낌 */
    --white: #ffffff;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;font-family:"Pretendard","Pretendard Variable",sans-serif;letter-spacing:-0.5px}
html{scroll-behavior:smooth}
body{line-height:1.6;color:var(--text);background:var(--bg);overflow-x:hidden}
a{text-decoration:none;color:inherit;display:inline-block}
ul{list-style:none}
.inner{max-width:1200px;margin:0 auto;padding:0 5%}

/* =========================================================
   Header
========================================================= */
header{position:fixed;top:0;width:100%;height:70px;display:flex;justify-content:space-between;align-items:center;padding:0 5%;z-index:1000;transition:0.4s}
header.scrolled, body.sub-page header {
    background: rgba(10, 25, 49, 0.95); /* 스크롤 시 딥네이비 유지 */
    backdrop-filter: blur(10px);
}
.logo { color: var(--white); font-weight: 800; letter-spacing: -1px; }
.logo span { color: var(--point); } /* 119나 SECURE 부분에 포인트 */
nav ul{display:flex}
nav ul li{margin:0 18px}
nav ul li a{font-weight:600;color:rgba(255, 255, 255, 0.7);font-size:0.95rem;transition:0.3s}
header:not(.scrolled):not(.sub-header) nav ul li a{color:rgba(255,255,255,0.9)}
nav ul li a:hover,nav ul li a.active{color:#ff8787 !important}

/* =========================================================
   Layout & Animation
========================================================= */
.section{padding:140px 5%;max-width:1200px;margin:0 auto;text-align:center}
.section-title{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;color:var(--p);margin-bottom:15px}
.section-desc{font-size:1.15rem;color:#666;margin-bottom:60px}
.anim-up{opacity:0;transform:translateY(50px);transition:1s}
.anim-up.active{opacity:1;transform:translateY(0)}
.d-1{transition-delay:.15s}.d-2{transition-delay:.3s}.d-3{transition-delay:.45s}

/* =========================================================
   Sub Visual
========================================================= */
.sub-visual{padding:160px 0 80px;background:linear-gradient(135deg,#050a1a,var(--p-dark));color:#fff;text-align:center}
.sub-visual h2{font-size:clamp(2.5rem,5vw,3.5rem);font-weight:900}
.sub-visual p{font-size:1.1rem;opacity:.8}

/* =========================================================
   Floating Button
========================================================= */
.btn-floating{position:fixed;right:40px;bottom:40px;background:var(--point);;color:#fff;padding:18px 35px;border-radius:50px;font-weight:800;z-index:999;
    border: 2px solid rgba(255, 255, 255, 0.2);
}
.btn-floating:hover{transform:translateY(-5px)}

/* =========================================================
   Footer
========================================================= */
#footer{background:#0a0a0a;color:#888;padding:80px 0 60px;border-top:1px solid #1a1a1a;font-size:.9rem}
.footer-top{margin-bottom:40px;border-bottom:1px solid #222}
.f-logo{color:#fff;font-size:1.8rem;font-weight:900}
.footer-middle{display:flex;justify-content:space-between;margin-bottom:60px}
.footer-middle h3{color:#fff;font-size:1rem;margin-bottom:25px}
.footer-middle ul li{margin-bottom:12px}
.footer-middle ul li a:hover{color:#fff}
.f-info{width:50%}
.f-nav{width:200px}
.footer-bottom{line-height:1.8;color:#888}
.f-links a{color:#888}
.f-links a:hover{color:#fff}
.copy{margin-top:10px;font-size:.8rem;opacity:.6}

/* =========================================================
   Responsive
========================================================= */
@media(max-width:992px){nav{display:none}}
@media(max-width:768px){
.section{padding:100px 5%}
.footer-middle{flex-direction:column}
.f-info,.f-nav{width:100%}
.btn-floating{right:20px;bottom:20px;padding:15px 25px}
}
/* ============================================================
   [BOTTOM CTA SECTION - 스크린샷 디자인 반영]
   ============================================================ */
.bottom-cta {
    position: relative;
    padding: 180px 0;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(to bottom, #f4f7fa 0%, rgba(244, 247, 250, 0) 30%), 
    radial-gradient(circle at 50% 100%, rgb(255 236 236 / 90%), transparent 80%), 
    radial-gradient(circle at 20% 80%, rgba(24, 90, 219, 0.2), transparent 50%);
}

.bottom-cta .inner {
    max-width: 900px; /* 텍스트 폭 제한 */
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* 5개의 점 데코레이션 */
.dots-deco {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 50px;
}
.dots-deco span {
    width: 6px;
    height: 6px;
    background-color: rgba(255,255,255,0.4);
    border-radius: 50%;
}
.dots-deco span:nth-child(1){background: #eeeeee;}
.dots-deco span:nth-child(2){background: #e7e7e7;}
.dots-deco span:nth-child(3){background: #ccc;}
.dots-deco span:nth-child(4){background: #cacaca;}
.dots-deco span:nth-child(5){background: #c9c9c9;}
/* 텍스트 스타일 */
.section-title-cta {
    font-size: clamp(1.8rem, 3.5vw, 2rem);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -1.5px;
    color: var(--p);
    text-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 60px;
    word-break: keep-all;
}

/* 보라색 둥근 버튼 */
.btn-purchase {
    display: inline-block;
    padding: 20px 50px;
    background-color: var(--p);
    border: 2px solid var(--p);
    transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    color: #fff!important;
    border-radius: 100px; /* 완벽하게 둥근 버튼 */
    font-size: 1.15rem;
    font-weight: 800;
    box-shadow: 0 10px 25px rgb(255 0 12 / 35%);
}
.btn-purchase:hover {
    background-color: var(--point); /* 호버 시 경고/긴급 레드 */
    border-color: var(--point);
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 20px 40px rgba(230, 57, 70, 0.4);
}

/* 모바일 대응 */
@media(max-width:768px){
    .bottom-cta { padding: 120px 0; }
    .section-title-cta { font-size: 1.6rem; }
    .btn-purchase { padding: 15px 35px; font-size: 1rem; }
}