/* Blue Elephant – Base (Global) */
@font-face {
  font-family: 'Helvetica Neue LT Pro';
  src: url('../fonts/HelveticaNeueLTProLt.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue LT Pro';
  src: url('../fonts/HelveticaNeueLTProMd.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue LT Pro';
  src: url('../fonts/HelveticaNeueLTProMdEx.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 기본 세팅 */
:root{
  --ink:#ffffff;
  --ink-d:rgba(255,255,255,.72);
  --ink-m:rgba(255,255,255,.54);

  --max:1600px;
  --pad:clamp(16px,2.2vw,36px);

  --z-base:1;
  --z-nav:1000;
  --z-overlay:1100;

  --font-family: 'Helvetica Neue LT Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --track-tight:-0.02em;
  --track-wide:0.08em;

  /* 헤더 높이(히어로 겹치기용) */
  --header-h:87px;
}

*{ box-sizing:border-box; }
html,body{ font-synthesis:none; font-stretch:100%; }
html{
  height:auto !important;
  scroll-behavior:smooth; overflow-x:hidden;
  background-image:url("../img/common_bg.jpg");
  background-position:center top;
  background-size:100% auto;
  background-repeat:repeat-y;
  background-attachment:scroll !important;  /* 혹시 fixed가 어딘가에 있으면 무력화 */
}   /* 🔧 가로 스크롤 방지 */
body{
  min-height: 100%;
  margin:0;
  color:var(--ink);
  background-position: center top;
  background: transparent; /* 보색 금지 */  font-family:var(--font-family);
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;                                   /* 🔧 가로 스크롤 방지 */
}
/* 전역 가이드 라인: 25%/50%/75% 지점, 흰색 40%, 1px */
body::after{
  content:"";
  position: fixed;  /* 스크롤과 무관하게 화면에 고정 */
  inset: 0;
  pointer-events: none;
  z-index: 0;       /* 페이지 모든 요소보다 뒤(헤더/섹션보다 낮게) */
  background:
    linear-gradient(90deg, rgba(255,255,255,.4) 0, rgba(255,255,255,.4) 1px, transparent 1px) 25% 0/1px 100% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.4) 0, rgba(255,255,255,.4) 1px, transparent 1px) 50% 0/1px 100% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.4) 0, rgba(255,255,255,.4) 1px, transparent 1px) 75% 0/1px 100% no-repeat;
}

/* 컨텐츠들이 라인보다 위로 오게 */
#page, .site, header, main, footer, section{
  position: relative;
  z-index: 1;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }
p{ margin:0 0 1em; }

img,video{ display:block; max-width:100%; height:auto; }
.media-cover>img,.media-cover>video{ width:100%; height:100%; object-fit:cover; object-position:center; }

/* Responsive type scale */
.display-xxl{ font-weight:800; letter-spacing:var(--track-tight); font-size:clamp(48px,10vw,180px); line-height:.9; }
.display-xl { font-weight:800; letter-spacing:var(--track-tight); font-size:clamp(40px,8vw,140px);  line-height:.95; }
.display-lg { font-weight:800; letter-spacing:var(--track-tight); font-size:clamp(32px,6vw,96px);   line-height:1; }
.h1{ font-weight:800; letter-spacing:var(--track-tight); font-size:clamp(28px,4vw,64px); line-height:1.05; }
.h2{ font-weight:800; letter-spacing:var(--track-tight); font-size:clamp(22px,3vw,40px); line-height:1.1; }
.h3{ font-weight:700;  letter-spacing:var(--track-tight); font-size:clamp(18px,2.2vw,28px); line-height:1.2; }
.lead{ font-weight:600; font-size:clamp(16px,1.5vw,22px); }
.small{ font-size:clamp(12px,1.1vw,14px); color:var(--ink-m); }
.caps{ text-transform:uppercase; letter-spacing:var(--track-wide); }

/* 섹션: 풀와이드 */
.section{ position:relative; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.section .inner{ padding:clamp(40px,8vw,120px) var(--pad); }

/* 12 grid (gap=0) */
.grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:0; row-gap:clamp(24px,3vw,40px); }
.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}

/* 유틸 */
.container{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
.center{text-align:center}.right{text-align:right}
.m0{margin:0!important}.mt3{margin-top:1rem}.mb3{margin-bottom:1rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ===== Header (fixed) ===== */
:root{ --header-h:87px; }

@media (max-width:1024px){ :root{ --header-h:96px; } }
@media (max-width:768px){  :root{ --header-h:104px; } }
@media (max-width:480px){  :root{ --header-h:112px; } }

.site-header{
  position: fixed; top:0; left:0; right:0; height:var(--header-h);
  z-index: 1000;
  background: transparent;  /* 기본은 완전 투명 */
}

.site-header__inner{
  position: relative; z-index: 1;           /* 내용물은 유리층 위에 */
  height: 100%;
  display:flex; align-items:center; justify-content:space-between;
  padding-left:36px; padding-right:89px;
}

.site-header__border{
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background: rgba(255,255,255,.3);
  z-index: 1;
}

/* 로고 33px */
.site-logo{ display:block; line-height:0 }
.site-logo img{ height:33px; width:auto; display:block; }

/* GNB */
.site-nav__list{
  list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:69px;
}
.nav-link{
  font-family:var(--font-family);
  font-weight:300;          /* 45 Light */
  font-style:normal;
  font-size:24px;
  line-height:100%;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
}
.site-nav__list li a:hover{ text-decoration:none; color:rgba(255,255,255,.85); }

/* 합성 금지(가짜 bold 방지) */
body{ font-synthesis:none; font-stretch:100%; }

/* 스크롤 시 글래스 */
.site-header.is-stuck{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
/* 유리층 — 스크롤 시에만 보이게 (::before) */
.site-header::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,255,.12), rgba(0,0,255,.08));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;                                 /* 기본: 안 보임 */
  transition: opacity .28s ease;
  pointer-events:none;
  z-index: 0;
}
.site-header.is-stuck::before{ opacity: 1; }  /* 스크롤 시: 보임 */

/* 모바일 패딩/로고 약간 축소(선택) */
@media (max-width:1024px){
  .site-header__inner{ padding-left:20px; padding-right:24px; }
}
@media (max-width:768px){
  .site-header__inner{ padding-left:16px; padding-right:16px; }
}


/* ================================
   Footer
   ================================ */
.site-footer{ position:relative; }
.site-footer__inner{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:clamp(80px,12vw,180px) var(--pad);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  min-height:clamp(420px,50vh,680px);
}
.footer-block{
  max-width:520px;
  padding-left:12px;
  color:var(--ink);
  font-family:var(--font-family);
}
.footer-title{
  margin:0 0 12px;
  font-weight:500;
  font-size:22px;
  line-height:12px;
  letter-spacing:-0.02em;
}
.footer-lines p,
.footer-lines a{
  font-family:var(--font-family);
  font-weight:300;
  font-size:22px;
  line-height:19px;
  letter-spacing:-0.02em;
  color:rgba(255,255,255,.6);
  text-decoration:none;
}
.footer-lines a:hover{ color:rgba(255,255,255,.75); text-decoration:none; }
.footer-sp-40{ height:40px; }
.footer-sp-120{ height:120px; }
.footer-meta p{
  margin:0 0 18px;
  font-weight:300;
  font-size:16px;
  letter-spacing:-0.02em;
  color:rgba(255,255,255,.8);
}
.footer-sns{ display:flex; align-items:center; gap:45px; }
.footer-sns .sns{ display:inline-flex; align-items:center; justify-content:center; }
.footer-sns .ig img{ width:26px; height:26px; }
.footer-sns .be img{ width:36px; height:21px; }
.footer-sns .vi img{ width:30px; height:28px; }

/* TOP 버튼 */
.to-top{
  position:absolute;
  left:75%; top:50%;
  transform:translate(-50%,-50%);
  width:clamp(200px,19vw,365px);
  height:clamp(200px,19vw,365px);
  border:0; background:none; padding:0; cursor:pointer;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.15));
  z-index: 999; pointer-events: auto;
}
.to-top svg{width: 100%; height: 100%;}

.to-top:active{ transform:translate(-50%,-50%) scale(.98); }

/* ================================
   Responsive
   ================================ */

/* 1024↓ : 헤더 좀 더 크게, 네비/푸터 가독성 유지 */
@media (max-width:1024px){
  :root{ --header-h:96px; }                    /* 🔼 헤더 더 큼 */
  .site-header__inner{ padding-left:20px; padding-right:24px; }
  .site-logo img{ height:30px; }
  .site-nav__list{ gap:32px; }
  .nav-link{ font-size:20px; }

  /* 푸터 타이포 유지 혹은 약간 크게 */
  .footer-title{ font-size:22px; }
  .footer-lines p, .footer-lines a{ font-size:22px; line-height:20px; }
}

/* 768↓ : 그리드선 비표시, 탑버튼 축소 */
@media (max-width:768px){
  :root{ --header-h:104px; }                   /* 🔼 더 큼 */
  body::after{
    background:
      linear-gradient(90deg, rgba(255,255,255,.25) 0, rgba(255,255,255,.15) 1px, transparent 1px) 25% 0/1px 100% no-repeat,
      linear-gradient(90deg, rgba(255,255,255,.25) 0, rgba(255,255,255,.15) 1px, transparent 1px) 50% 0/1px 100% no-repeat,
      linear-gradient(90deg, rgba(255,255,255,.25) 0, rgba(255,255,255,.15) 1px, transparent 1px) 75% 0/1px 100% no-repeat;
  }
  .site-header__inner{ padding-left:16px; padding-right:16px; }
  .site-logo img{ height:32px; }
  .site-nav__list{ gap:20px; }
  .nav-link{ font-size:18px; }

  .site-footer__inner{ grid-template-columns:1fr; }
  .footer-block{ max-width:none; }
  .to-top{
    position:static; transform:none;
    width:160px; height:160px;                 /* 🔽 모바일에서 작게 */
    margin:48px auto 0; display:block;
  }
}

/* 480↓ : 모바일 초소형 – 네비/푸터 더 읽기 좋게 */
@media (max-width:480px){
  :root{ --header-h:112px; }                   /* 🔼 가장 큼 */
  .site-logo img{ height:34px; }
  .site-nav__list{ gap:16px; }
  .nav-link{ font-size:17px; }

  .section .inner{ padding:56px 16px; }
  .site-footer__inner{ padding:64px 16px; }
  .footer-title{ font-size:20px; }
  .footer-lines p, .footer-lines a{ font-size:20px; line-height:19px; }
  .footer-meta p{ font-size:15px; }
  .footer-col.col-1{display: none;}
  .to-top{ display: none;}
}