/* =========================================================
 * common.css — 헤더 / 푸터 / 메가메뉴 / 모바일메뉴 / 팝업
 * ========================================================= */

:root{
  --brand:#0a2c66;
  --brand-2:#1d4ea8;
  --accent:#2f80ed;
  --ink:#1a1a1a;
  --ink-2:#444;
  --muted:#888;
  --line:#e5e7eb;
  --bg-soft:#f6f8fb;
  --white:#fff;
  --black:#000;
  --header-h:80px;
  --header-h-compact:64px;
  --container:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ----- Typography ----- */
.section-title{font-size:38px;letter-spacing:-.02em;color:var(--ink)}
.section-sub{margin-top:8px;color:var(--muted);font-size:17px}
.eyebrow{display:inline-block;font-size:15px;letter-spacing:.18em;color:var(--accent);font-weight:700;text-transform:uppercase}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border:1px solid var(--brand);color:var(--brand);background:#fff;font-weight:600;transition:.25s var(--ease)}
.btn:hover{background:var(--brand);color:#fff}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn-ghost{border-color:#fff;color:#fff;background:transparent}
.btn-ghost:hover{background:#fff;color:var(--brand)}

/* =========================================================
 * Header
 * ========================================================= */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid transparent;transition:.3s var(--ease)}
.site-header.is-scrolled{border-bottom-color:var(--line);background:#fff}
.site-header.is-transparent{background:transparent;color:#fff}
.site-header.is-transparent .gnb li>a,
.site-header.is-transparent .util-bar a,
.site-header.is-transparent .logo-text{color:#fff}
.site-header.is-transparent.is-scrolled{background:#fff;color:var(--ink)}
.site-header.is-transparent.is-scrolled .gnb li>a,
.site-header.is-transparent.is-scrolled .util-bar a,
.site-header.is-transparent.is-scrolled .logo-text{color:var(--ink)}

.header-inner{max-width:var(--container);margin:0 auto;height:var(--header-h);padding:0 20px;display:flex;align-items:center;justify-content:space-between;transition:height .3s var(--ease)}
.is-scrolled .header-inner{height:var(--header-h-compact)}

.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;letter-spacing:-.02em}
.logo-mark{width:36px;height:36px;background:var(--brand);color:#fff;display:grid;place-items:center;border-radius:6px;font-size:14px;letter-spacing:.04em}
.logo-text{color:var(--brand)}
.is-transparent .logo-text{color:#fff}

/* 이미지 로고 (RNS Robot & System) */
.logo-img{height:72px;width:auto;display:block;transition:height .3s var(--ease)}
.is-scrolled .logo-img{height:56px}
/* 헤더 높이도 로고에 맞춰 살짝 키움 */
:root{--header-h:96px;--header-h-compact:72px}
/* 투명 헤더(메인 히어로) 위에서는 로고를 흰색으로 — CSS 필터로 반전 */
.site-header.is-transparent .logo-img{filter:brightness(0) invert(1)}
.site-header.is-transparent.is-scrolled .logo-img{filter:none}
/* 푸터 로고는 흰색이어야 함 */
.site-footer .logo-img{filter:brightness(0) invert(1);height:64px}

/* 모바일 — 로고 약간 축소 */
@media (max-width:767px){
  .logo-img{height:52px}
  .is-scrolled .logo-img{height:44px}
  :root{--header-h:72px;--header-h-compact:60px}
}

/* GNB (1차) */
.gnb ul{display:flex;gap:8px;list-style:none;padding:0;margin:0}
.gnb li{position:relative}
.gnb li>a{display:inline-block;padding:0 22px;line-height:var(--header-h);font-size:16px;font-weight:600;color:var(--ink);transition:color .2s var(--ease)}
.is-scrolled .gnb li>a{line-height:var(--header-h-compact)}
.gnb li>a:hover,.gnb li.is-active>a{color:var(--brand)}

/* 메가메뉴 (2차) */
.mega{position:fixed;left:0;right:0;top:var(--header-h);background:#fff;border-top:1px solid var(--line);box-shadow:0 18px 30px -22px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.25s var(--ease);z-index:90}
.is-scrolled+.mega,.site-header.is-scrolled~.mega{top:var(--header-h-compact)}
.site-header.is-mega-open .mega,.site-header:hover .mega{opacity:1;visibility:visible;transform:none}
.mega-inner{max-width:var(--container);margin:0 auto;padding:30px 20px 36px;display:grid;grid-template-columns:repeat(5,1fr);gap:32px}
.mega-col h4{font-size:15px;color:var(--brand);margin-bottom:14px}
.mega-col ul li+li{margin-top:8px}
.mega-col ul a{display:inline-block;color:var(--ink-2);font-size:14px;padding:2px 0;border-bottom:1px solid transparent;transition:.2s var(--ease)}
.mega-col ul a:hover{color:var(--brand);border-bottom-color:var(--brand)}

/* 유틸바 */
.util-bar{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--ink-2)}
.lang-switch{display:flex;gap:6px;align-items:center;font-weight:600;letter-spacing:.04em}
.lang-switch a{padding:2px 6px;color:var(--muted)}
.lang-switch a.is-active{color:var(--brand)}
.lang-switch span{color:var(--line)}

/* 햄버거 */
.hamburger{display:none;width:40px;height:40px;position:relative}
.hamburger span{position:absolute;left:8px;right:8px;height:2px;background:var(--ink);transition:.25s var(--ease)}
.hamburger span:nth-child(1){top:13px}
.hamburger span:nth-child(2){top:19px}
.hamburger span:nth-child(3){top:25px}
.is-transparent .hamburger span{background:#fff}
.is-transparent.is-scrolled .hamburger span{background:var(--ink)}
.is-mobile-open .hamburger span:nth-child(1){top:19px;transform:rotate(45deg)}
.is-mobile-open .hamburger span:nth-child(2){opacity:0}
.is-mobile-open .hamburger span:nth-child(3){top:19px;transform:rotate(-45deg)}

/* 모바일 메뉴 패널 */
.mobile-panel{position:fixed;inset:var(--header-h) 0 0 0;background:#fff;overflow-y:auto;transform:translateX(100%);transition:.35s var(--ease);z-index:80}
.is-mobile-open .mobile-panel{transform:none}
.mobile-nav{padding:10px 20px 40px}
.mobile-nav>li{border-bottom:1px solid var(--line)}
.mobile-nav>li>a{display:flex;align-items:center;justify-content:space-between;padding:18px 0;font-size:17px;font-weight:600;color:var(--ink)}
.mobile-nav>li>a::after{content:"";width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:.2s var(--ease)}
.mobile-nav>li.is-open>a::after{transform:rotate(-135deg)}
.mobile-sub{display:none;padding:0 0 16px 4px}
.mobile-nav>li.is-open .mobile-sub{display:block}
.mobile-sub li a{display:block;padding:8px 0;font-size:15px;color:var(--ink-2)}
.mobile-sub li a:hover{color:var(--brand)}

/* =========================================================
 * Footer
 * ========================================================= */
.site-footer{margin-top:80px;background:#0f1825;color:#aab3c0;font-size:14px}
.footer-top{padding:48px 0 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;max-width:var(--container);margin:0 auto;padding-left:20px;padding-right:20px}
.footer-brand .logo-text{color:#fff}
.footer-info{margin-top:18px;line-height:1.6}
.footer-info dt{display:inline-block;color:#6f7a8b;min-width:60px;margin-right:8px}
.footer-info dd{display:inline;margin:0}
/* QUICK MENU 링크(padding:4px 0)와 같은 행간으로 맞춤 */
.footer-info dl{margin:0;padding:4px 0}
.footer-quick h5,.footer-family h5{color:#fff;font-size:15px;margin-bottom:14px}
.footer-quick a{display:block;padding:4px 0;color:#aab3c0}
.footer-quick a:hover{color:#fff}
.family-select{width:100%;max-width:260px;padding:10px 12px;background:#1c2535;color:#fff;border:1px solid #2a3447}
.footer-bottom{border-top:1px solid #1f2a3c;padding:18px 20px;text-align:center;color:#6f7a8b;font-size:13px}

/* =========================================================
 * Main popup layer
 * ========================================================= */
.popup-layer{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
.popup-layer.is-open{display:flex}
.popup-box{background:#fff;width:100%;max-width:520px;overflow:hidden;box-shadow:0 30px 60px -10px rgba(0,0,0,.4)}
.popup-body{padding:0}
.popup-body img{width:100%;display:block}
.popup-body .text-block{padding:28px}
.popup-body h3{font-size:22px;color:var(--brand);margin-bottom:10px}
.popup-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);background:#fafbfc;padding:10px 16px;font-size:14px}
.popup-foot label{display:flex;gap:8px;align-items:center;color:var(--ink-2);cursor:pointer}
.popup-close{padding:6px 12px;color:var(--ink);font-weight:600}

/* =========================================================
 * Common sub-page hero & breadcrumb
 * ========================================================= */
.sub-hero{position:relative;height:280px;background:#0a2c66 center/cover no-repeat;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;margin-top:var(--header-h)}
.sub-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,44,102,.55),rgba(10,44,102,.85))}
.sub-hero .inner{position:relative;z-index:1}
.sub-hero h1{font-size:38px;letter-spacing:-.02em}
.sub-hero p{margin-top:8px;color:#cfd6e3;font-size:15px}

.breadcrumb{background:#fff;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.breadcrumb ol{max-width:var(--container);margin:0 auto;padding:14px 20px;display:flex;gap:8px;flex-wrap:wrap}
.breadcrumb li+li::before{content:"›";margin-right:8px;color:var(--line)}
.breadcrumb li.current{color:var(--ink)}

/* 본문 영역 */
main.sub-main{padding:60px 0 80px}
main.sub-main .container{display:grid;grid-template-columns:240px 1fr;gap:50px;align-items:start}
.lnb{position:sticky;top:calc(var(--header-h-compact) + 20px)}
.lnb h2{font-size:22px;color:var(--brand);margin-bottom:18px;padding-bottom:14px;border-bottom:2px solid var(--brand)}
.lnb ul li a{display:block;padding:12px 4px;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:15px;transition:.2s var(--ease)}
.lnb ul li a:hover,.lnb ul li.is-active a{color:var(--brand);font-weight:600;border-bottom-color:var(--brand)}

.content-head{margin-bottom:30px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.content-head h2{font-size:30px;letter-spacing:-.02em}
.content-head p.lead{margin-top:10px;color:var(--muted);font-size:15px}

.prose p{margin-bottom:14px;color:var(--ink-2)}
.prose h3{margin:30px 0 12px;font-size:20px;color:var(--brand)}
.prose h4{margin:18px 0 8px;font-size:16px}
.prose ul{margin:8px 0 14px 18px;list-style:disc}
.prose ul li{margin-bottom:6px;color:var(--ink-2)}
.prose .figure{margin:24px 0;border:1px solid var(--line);background:var(--bg-soft);padding:30px;text-align:center;color:var(--muted)}
.prose table{margin:18px 0;border:1px solid var(--line)}
.prose th,.prose td{padding:12px 14px;border:1px solid var(--line);text-align:left;font-size:14px}
.prose th{background:var(--bg-soft);color:var(--ink);font-weight:600}

/* 카드 그리드 */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--line);transition:.25s var(--ease);overflow:hidden}
.card:hover{box-shadow:0 18px 40px -20px rgba(0,0,0,.18);transform:translateY(-3px)}
.card .thumb{background:var(--bg-soft);aspect-ratio:4/3;display:grid;place-items:center;color:var(--muted)}
/* 관리자에서 이미지를 올린 카드 */
.card .thumb.has-img{background-size:cover;background-position:center;background-repeat:no-repeat}
.card .body{padding:18px 20px 22px}
.card .body h4{font-size:17px;margin-bottom:8px;color:var(--ink)}
.card .body p{font-size:14px;color:var(--ink-2)}

/* 스크롤 페이드 인 */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* 성능 — 뷰포트 밖 섹션 렌더 지연 (Core Web Vitals 개선) */
.section,.business-grid,.product-grid,.yt-section,.client-grid,.board-list,.form-table{content-visibility:auto;contain-intrinsic-size:1px 600px}
/* 접근성 — 모션 감소 선호 시 전환 효과 비활성 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}

/* ====== a11y ====== */
/* Skip-link — 키보드 사용자가 콘텐츠로 바로 이동 */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--brand);color:#fff;padding:10px 18px;font-weight:600;border-radius:0 0 4px 0}
.skip-link:focus{left:0;outline:3px solid #7fb3ff;outline-offset:-3px}

/* 포커스 표시 — 키보드 사용자에게만 명확한 표시 */
:focus-visible{outline:2px solid #2f80ed;outline-offset:2px;border-radius:2px}
/* 마우스 클릭은 outline 숨김 */
:focus:not(:focus-visible){outline:none}

/* 현재 위치 강조 (aria-current) */
[aria-current="page"]{font-weight:700;color:var(--brand)}

/* 색상 대비 보강 — 본문 텍스트 WCAG AA 충족 */
.section-sub,.card .body p{color:#5b6373}

/* 고대비 선호 시 보더 강화 */
@media (prefers-contrast: more){
  .btn,.card,.biz-card,.prd-card,.spec-table th,.spec-table td{border-color:#000 !important}
  :focus-visible{outline-width:3px;outline-color:#000}
}

/* 폼 에러 표시 */
.has-error{border-color:#e84a4a !important;background:#fff5f5 !important}