/* ==========================================================================
   공통 스타일 (common.css) — 새 GFS 홈페이지
   - 여러 페이지가 함께 사용. 색상 등 공통 값은 :root 에서 수정.
   - 상단 메뉴(흰 바 + 주황 하위메뉴 띠)와 푸터가 여기 들어 있습니다.
========================================================================== */
:root{
  --accent:#F18C1D;       /* 포인트 주황 */
  --accent2:#E8231A;      /* 보조 빨강 */
  --head-h:96px;          /* 상단 메뉴 높이 */
  --content-w:1600px;     /* 콘텐츠 최대 폭 (배경은 화면 끝까지, 내용은 이 안에) */
  --footer-bg:#2b2f36;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:'Noto Sans KR','Apple SD Gothic Neo',-apple-system,sans-serif; color:#222; background:#fff; }
img{ display:block; }
a{ text-decoration:none; color:inherit; }

/* 콘텐츠 가운데 정렬용 */
.inner{ max-width:var(--content-w); margin:0 auto; padding:0 40px; }

/* ==========================================================================
   상단 메뉴 (고정, 흰 배경) + 마우스 오버 시 주황 하위메뉴 띠
   ========================================================================== */
/* 기본: 배경 투명 + 흰 글씨 (배너 위에 얹힘) / 메뉴 바에 오버하면 전체 흰 배경 + 검정 글씨 */
.site-head{ position:fixed; top:0; left:0; width:100%; z-index:100;
  background:transparent; transition:background .25s ease, box-shadow .25s ease, transform .3s ease, opacity .3s ease; }
.site-head.hide-head{ transform:translateY(-100%); opacity:0; pointer-events:none; }   /* 서브메뉴가 상단에 붙으면 메인메뉴 숨김 */
.site-head:hover{ background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.07); }
.head-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  height:var(--head-h); max-width:var(--content-w); margin:0 auto; padding:0 40px; }

.head-logo{ justify-self:start; }
.head-logo img{ height:54px; }
.head-logo .logo-text{ font-size:28px; font-weight:900; color:#fff; letter-spacing:1px; transition:color .25s; }
.site-head:hover .head-logo .logo-text{ color:var(--accent); }

/* 가운데 대메뉴 — 기본 흰 글씨, 바 오버 시 검정 */
.gnb{ justify-self:center; display:flex; gap:56px; list-style:none; }
.gnb-item > a{ display:inline-block; font-size:19px; font-weight:700; color:#fff;
  line-height:var(--head-h); transition:color .2s; }
.site-head:hover .gnb-item > a{ color:#222; }
.site-head .gnb-item:hover > a{ color:var(--accent); }   /* 오버한 항목은 주황 */

/* 우측 언어 — 기본 흰 글씨, 바 오버 시 회색/검정 */
.head-lang{ justify-self:end; display:flex; align-items:center; gap:10px; font-size:14px; color:rgba(255,255,255,.75); }
.head-lang a{ color:#fff; }
.site-head:hover .head-lang{ color:#aaa; }
.site-head:hover .head-lang a{ color:#aaa; }
.head-lang a.on{ font-weight:700; }
.site-head:hover .head-lang a.on{ color:#333; }
.head-lang a:hover{ color:var(--accent) !important; }

/* 주황 하위메뉴 띠 (화면 전체폭, 오버 시 나타남) */
.gnb-sub{ position:absolute; left:0; top:var(--head-h); width:100%;
  background:var(--accent);
  display:flex; justify-content:center; gap:44px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s; }
.gnb-item:hover .gnb-sub{ opacity:1; visibility:visible; transform:none; }
.gnb-sub a{ color:#fff; font-size:15px; font-weight:600; padding:15px 0; white-space:nowrap; }
.gnb-sub a:hover{ text-decoration:underline; }

/* 햄버거 버튼 (PC 숨김) */
.gnb-toggle{ display:none; justify-self:end; width:42px; height:42px; padding:9px;
  background:none; border:none; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; }
.gnb-toggle span{ display:block; height:2px; background:#333; border-radius:2px; transition:.2s; }

/* 밝은 섹션(data-theme="light") 위에 왔을 때: 오버 안 해도 흰 배경 + 검정 글씨 */
.site-head.on-light{ background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.07); }
.site-head.on-light .head-logo .logo-text{ color:var(--accent); }
.site-head.on-light .gnb-item > a{ color:#222; }
.site-head.on-light .gnb-item:hover > a{ color:var(--accent); }
.site-head.on-light .head-lang{ color:#aaa; }
.site-head.on-light .head-lang a{ color:#aaa; }
.site-head.on-light .head-lang a.on{ color:#333; }

/* ==========================================================================
   섹션 공통 (풀페이지) + 스크롤 유도 아이콘
   ========================================================================== */
.sec{ position:relative; width:100%; min-height:100vh; overflow:hidden; }

.scroll-cue{ position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:6px; color:#fff; }
.scroll-cue svg{ width:26px; height:26px; }
.scroll-cue .sc-text{ font-size:12px; letter-spacing:1px; opacity:.9; }
.scroll-cue .sc-arrow{ animation:cueBounce 1.5s ease-in-out infinite; }  /* 화살표만 바운스 */
@keyframes cueBounce{
  0%,100%{ transform:translateY(0); opacity:.6; }
  50%{ transform:translateY(7px); opacity:1; }
}

/* ==========================================================================
   서브페이지 공용 : 서브배너 + 서브메뉴(스크롤 시 상단 고정)
   ▶ 서브페이지에 .sub-banner 와 .sub-nav 를 넣으면 자동 적용됩니다.
   ========================================================================== */
.sub-banner{ position:relative; width:100%; height:365px; overflow:hidden;
  background:#1a1d22 center/cover no-repeat;
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.sub-banner::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); }
.sub-banner .sb-copy{ position:relative; z-index:2; text-align:center; color:#fff; }
.sub-banner .sb-copy h2{ font-size:44px; font-weight:800; letter-spacing:2px; }
.sub-banner .sb-copy .sb-page{ margin-top:8px; font-size:20px; font-weight:600; color:rgba(255,255,255,.9); }

/* 서브메뉴 바 (주황 반투명, 높이 52, 스크롤 내리면 상단 고정) */
.sub-nav{ position:sticky; top:0; z-index:90; height:52px;
  background:rgba(152, 152, 152, 0.6);                 /* 주황 opacity 60% */
  display:flex; align-items:center; justify-content:center; }
.sub-nav a{ color:#fff; font-size:14px; font-weight:600; padding:0 18px; line-height:52px; white-space:nowrap; }
.sub-nav a:hover, .sub-nav a.on{ text-decoration:underline; }

/* 서브 섹션: 서브메뉴에 가려지지 않도록 앵커 이동 시 위 여백 확보 */
.sub-sec{ scroll-margin-top:52px; }

/* ==========================================================================
   우측 하단 '최상단으로' 버튼
   ========================================================================== */
.to-top{ position:fixed; right:26px; bottom:26px; z-index:90;
  width:50px; height:50px; border-radius:50%; border:none; cursor:pointer;
  background:var(--accent); color:#fff; font-size:22px; line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.25s; }
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ filter:brightness(.96); }

/* ==========================================================================
   푸터 (임시 — 시안 나오면 교체)
   ========================================================================== */
.foot{ width:100%; background:var(--footer-bg); color:#cfcfcf; padding:34px 0; }
.foot-inner{ display:flex; align-items:center; justify-content:space-between; gap:40px; }
.foot-left{ display:flex; align-items:center; gap:28px; }
.foot .f-logo img{ height:54px; }
.foot .f-logo .logo-text{ font-size:30px; font-weight:900; color:#fff; }
.foot .f-info{ font-size:13px; line-height:1.9; }
.foot .f-info .copy{ margin-top:6px; color:#9a9a9a; }
/* 오른쪽: 전화번호 + 링크 버튼 */
.foot-right{ text-align:right; }
.foot-phone{ display:flex; gap:34px; justify-content:flex-end; align-items:baseline; margin-bottom:12px; }
.foot-phone span{ font-size:26px; font-weight:800; color:#fff; }
.foot-phone em{ font-style:normal; font-size:15px; font-weight:700; color:#b6b6b6; margin-right:6px; }
.foot-btns{ display:flex; gap:8px; justify-content:flex-end; }
.foot-btns a{ background:#5a5f66; color:#eee; font-size:13px; font-weight:500; padding:9px 16px; border-radius:3px; }
.foot-btns a:hover{ background:#6a6f76; }

/* ==========================================================================
   📱 모바일 (900px 이하)
   ========================================================================== */
@media (max-width:900px){
  .head-row{ grid-template-columns:auto 1fr; height:64px; padding:0 16px; }
  .head-logo img{ height:36px; }
  .gnb-toggle{ display:flex; }

  /* 대메뉴: 평소 숨김 → 햄버거 누르면 세로 패널 */
  .gnb{ position:absolute; top:64px; left:0; width:100%; background:#fff;
    flex-direction:column; gap:0; display:none; box-shadow:0 8px 20px rgba(0,0,0,.12); }
  .site-head.nav-open .gnb{ display:flex; }
  .gnb-item{ border-top:1px solid #eee; }
  .gnb-item > a{ display:block; line-height:1.2; padding:16px 20px; font-size:16px; }

  /* 하위메뉴: 세로 아코디언 */
  .gnb-sub{ position:static; width:100%; opacity:1; visibility:visible; transform:none;
    flex-direction:column; gap:0; display:none; background:var(--accent); }
  .gnb-item.open .gnb-sub{ display:flex; }
  .gnb-sub a{ padding:12px 34px; font-size:14px; }

  /* 언어 선택 숨김(공간 절약) — 필요하면 메뉴 안으로 옮기면 됨 */
  .head-lang{ display:none; }

  /* 햄버거 X 변형 */
  .site-head.nav-open .gnb-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .site-head.nav-open .gnb-toggle span:nth-child(2){ opacity:0; }
  .site-head.nav-open .gnb-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .foot-inner{ flex-direction:column; align-items:flex-start; gap:20px; }
  .foot-left{ flex-direction:column; align-items:flex-start; gap:14px; }
  .foot-right{ text-align:left; }
  .foot-phone{ justify-content:flex-start; gap:20px; }
  .foot-phone span{ font-size:20px; }
  .foot-btns{ justify-content:flex-start; flex-wrap:wrap; }
}


/* ==========================================================================
   서브페이지 공용 : 서브배너(1920x365) + 서브메뉴(주황 바, 스티키)
   ▶ 서브페이지 HTML에 .sub-banner 와 .sub-nav 를 넣으면 이 스타일이 적용됩니다.
   ========================================================================== */
.sub-banner{ position:relative; width:100%; height:365px; overflow:hidden;
  background:#0b1622 center/cover no-repeat;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fff; }
.sub-banner::after{ content:""; position:absolute; inset:0; background:rgba(8,14,22,.5); z-index:1; }
.sub-banner > *{ position:relative; z-index:2; }
.sub-banner .sb-copy{ font-size:44px; font-weight:800; letter-spacing:2px; }
.sub-banner .sb-page{ margin-top:10px; font-size:20px; font-weight:600; opacity:.92; }

/* 서브메뉴 : 주황 반투명 60% 바, 스크롤하면 상단 고정(sticky) */
.sub-nav{ position:sticky; top:0; z-index:90; width:100%; height:52px;
  background:rgba(241,140,29,.6);
  display:flex; align-items:center; justify-content:center; gap:38px; }
.sub-nav a{ color:#fff; font-size:15px; font-weight:600; white-space:nowrap; }
.sub-nav a:hover, .sub-nav a.on{ text-decoration:underline; }
.sub-nav.stuck{ background:rgba(241,140,29,.95); box-shadow:0 2px 10px rgba(0,0,0,.15); }

/* 서브메뉴가 상단에 붙으면 메인 메뉴 숨김(위로 사라짐) */
.site-head.hide-head{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .12s ease, visibility .12s ease; }

/* 앵커 이동 시 섹션이 서브메뉴(52px)에 안 가리도록 */
.sub-sec{ scroll-margin-top:52px; }

/* 서브페이지 모바일 */
@media (max-width:900px){
  .sub-banner{ height:200px; }
  .sub-banner .sb-copy{ font-size:24px; }
  .sub-banner .sb-page{ font-size:15px; }
  .sub-nav{ gap:16px; justify-content:flex-start; padding:0 16px; overflow-x:auto; }
  .sub-nav a{ font-size:13px; }
}