/* ==========================================================================
   룩스솔루션 공통 스타일시트 (assets/css/common.css)
   - 모든 페이지가 <link rel="stylesheet" href="assets/css/common.css"> 로 불러오는
     공용 CSS입니다: 색상 변수, 리셋, 컨테이너 폭(1280px), GNB(헤더/내비게이션),
     모바일 햄버거 메뉴, 푸터 스타일이 여기 있습니다.
   - 이 파일 하나만 고치면 9개 페이지 전부에 즉시 반영됩니다 (별도 스크립트 실행 불필요).
   - 각 페이지의 <style> 안에는 그 페이지에만 해당하는 스타일(히어로, 카드 등)만 있습니다.
   ========================================================================== */

:root{
  --navy:#002B49; --cyan:#00A3E0; --white:#FFFFFF; --bg-light:#F8F9FA; --bg-light2:#F4F6F8;
  --border:#E2E8F0; --slate:#1E293B; --muted:#64748B; --footer:#0F172A;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Pretendard','Inter',-apple-system,BlinkMacSystemFont,sans-serif; color:var(--slate); line-height:1.6; background:var(--white); word-break:keep-all; overflow-wrap:break-word;}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}

/* 페이지 공통 컨테이너 폭 (전 페이지 1280px로 통일) */
.container{max-width:1280px; margin:0 auto; padding:0 24px;}

/* Header / GNB */
header{position:sticky; top:0; z-index:100; background:var(--navy); height:80px; display:flex; align-items:center;}
.gnb-inner{display:flex; align-items:center; justify-content:space-between; width:100%; position:relative;}
.logo{display:flex; align-items:center; gap:10px;}
.logo img{height:44px; width:44px; border-radius:50%;}
.logo span{color:#fff; font-weight:700; font-size:18px; letter-spacing:0.3px;}
nav{display:flex; align-items:center; gap:32px;}
nav a{color:#E2E8F0; font-size:15px; font-weight:500;}
nav a:hover{color:var(--cyan);}
nav a.active{color:var(--cyan);}
.dropdown{position:relative;}
.dropdown-menu{display:none; position:absolute; top:100%; left:0; background:#fff; border-radius:8px; box-shadow:0px 4px 12px rgba(0,0,0,0.12); padding:8px 0; min-width:170px;}
.dropdown-menu a{display:block; padding:10px 18px; color:var(--slate); font-size:14px; font-weight:400;}
.dropdown-menu a:hover{background:var(--bg-light2); color:var(--navy);}
.dropdown-menu a.active{color:var(--cyan);}
.dropdown:hover .dropdown-menu{display:block;}
.btn-contact{background:var(--cyan); color:#fff; padding:10px 22px; border-radius:6px; font-weight:600; font-size:14px;}
.btn-contact:hover{background:#33b5e6;}

/* 모바일 GNB 토글 버튼 */
.gnb-right{display:flex; align-items:center; gap:14px;}
.menu-toggle{display:none; background:none; border:none; width:26px; height:20px; position:relative; cursor:pointer; padding:0;}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{content:""; position:absolute; left:0; width:100%; height:2px; background:#fff; transition:all .2s ease;}
.menu-toggle span{top:9px;}
.menu-toggle span::before{top:-8px;}
.menu-toggle span::after{top:8px;}
.menu-toggle.open span{background:transparent;}
.menu-toggle.open span::before{transform:rotate(45deg); top:0;}
.menu-toggle.open span::after{transform:rotate(-45deg); top:0;}

/* Footer (전 페이지 공통, index.html 기준) */
footer{background:var(--footer); color:#94A3B8; padding:56px 0 24px; font-size:14px;}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; padding-bottom:32px; border-bottom:1px solid #1E293B;}
.footer-top h4{color:#fff; font-size:15px; margin-bottom:14px; font-weight:600;}
.footer-top a{display:block; color:#94A3B8; margin-bottom:8px;}
.footer-top a:hover{color:#fff;}
.footer-bottom{padding-top:20px; display:flex; justify-content:space-between; font-size:12px; color:#64748B;}

@media (max-width:900px){
  .menu-toggle{display:block;}
  nav{display:none; position:absolute; top:80px; left:0; width:100%; background:var(--navy); flex-direction:column; align-items:stretch; gap:0; padding:6px 0; box-shadow:0px 10px 20px rgba(0,0,0,0.18); z-index:99;}
  nav.open{display:flex;}
  nav a{padding:14px 24px; width:100%;}
  .dropdown{width:100%;}
  .dropdown-menu{position:static; display:none; box-shadow:none; border-radius:0; background:var(--bg-light2); padding:0; min-width:0;}
  .dropdown.open .dropdown-menu{display:block;}
  .dropdown-menu a{padding:12px 24px 12px 40px;}
  .footer-top{grid-template-columns:1fr;}
}