/* ==========================================================================
   LAYER Nº custom theme
   - default.css(그누보드 기본, 폼/게시판/팝업 기능 스타일) 다음에 로드되어
     헤더 / 네비게이션 / 푸터 / 인덱스 히어로를 새 디자인으로 덮어씁니다.
   ========================================================================== */

:root{
  --bg:#ffffff;
  --ink:#111111;
  --ink-soft:#6b6b6b;
  --line:#eaeaea;
  --accent:#111111;
  --nav-h:72px;
  --max:1600px;
  --side:40px;
}

html{overflow-y:scroll}
body{
  background:var(--bg) !important;
  color:var(--ink);
  font-family:'Apple SD Gothic Neo', 'Malgun Gothic', 'Nanum Gothic', 'Spoqa Han Sans', sans-serif !important;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}

/* 그누보드 기본 css의 고정폭/최소폭 강제를 해제하고 반응형으로 전환 */
#hd, #wrapper, #ft{min-width:0 !important}
#hd_wrapper, #container_wr, #ft_wr{width:100% !important}

.ln_inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--side);
  box-sizing:border-box;
}

a{color:inherit;text-decoration:none}

/* -------------------- 헤더 -------------------- */
#hd{
  background:var(--bg);
  box-shadow:0 1px 0 0 var(--line); /* border-bottom 대신 box-shadow 사용 (일부 환경의 1px 테두리 렌더링 끊김 버그 우회) */
  position:relative;
  z-index:50;
}
/* 그누보드 기본css가 헤더 안쪽 여기저기(#gnb_1dul 등)에 자체 밑줄을 넣어서
   위 #hd 밑줄과 어긋나 끊겨 보이는 문제 - 하위요소 밑줄을 전부 강제로 차단 */
#hd *{
  border-bottom:0 !important;
  border-top:0 !important;
}
#hd_h1{position:absolute;font-size:0;line-height:0;overflow:hidden}
#skip_to_container a{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:#fff;padding:10px 16px;z-index:200;
}
#skip_to_container a:focus{left:8px;top:8px}

#hd_wrapper{
  height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
}

#logo{
  order:1;
  flex:0 0 auto;
  margin-right:48px;
  padding:0; /* 그누보드 기본 css의 padding:30px 0 0 무효화 */
}
#logo a{
  display:block;
  line-height:0;
}
#logo img{
  display:block;
  height:32px;   /* 로고 이미지 높이 - 필요시 조정하세요 */
  width:auto;
  max-width:220px;
  object-fit:contain;
}

#gnb{
  order:2;
  flex:1;
  display:flex;
  align-items:center;
  background:none; /* 그누보드 기본css의 background:#fff 제거 - 넘치는 부분이 밑줄을 가리고 있었음 */
  overflow:visible;
}
#gnb .gnb_wrap{
  display:flex;
  align-items:center;
  justify-content:flex-end; /* 우측 유틸(로그인 등)은 오른쪽 끝 고정 */
  width:100%;
}

/* 좌측 주메뉴 (ABOUT / PROJECT / CONTACT 등 - 그누보드 메뉴설정에서 관리) */
#gnb_1dul{
  display:flex;
  align-items:center;
  gap:6px;
  list-style:none;
  margin:0;padding:0;
  border-bottom:0; /* 그누보드 기본 css가 #gnb_1dul에 자체 밑줄을 넣는데, #hd 전체 밑줄과 어긋나 선이 끊겨보였음 */
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
}
.gnb_1dli{position:relative;float:none;line-height:normal}
.gnb_1da{
  display:block;
  padding:10px 14px !important; /* 기본css의 .gnb_al_li_plus 추가 우측여백(원래 화살표아이콘 자리) 무효화 */
  font-size:13px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:var(--ink);
}
.gnb_1dli.gnb_1dli_over .gnb_1da,
.gnb_1da:hover{color:var(--ink); text-decoration:underline; text-underline-offset:4px}

.gnb_empty{
  font-size:12px;color:var(--ink-soft);padding:10px 14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:60vw;min-width:0;
}
.gnb_empty a{text-decoration:underline}

/* 2뎁스 서브메뉴 (jquery.menu.js 의 hover 동작과 함께 사용됨) - twoply.com 참고 */
.gnb_2dul{
  position:absolute !important;
  top:100% !important;left:0;
  min-width:170px;
  background:#fff;
  border:0;
  border-top:1px solid var(--ink);
  padding:8px 0 !important;
  display:none;
  box-shadow:0 8px 20px rgba(0,0,0,0.06);
}
.gnb_1dli.gnb_1dli_over .gnb_2dul,
.gnb_1dli.gnb_2d_open .gnb_2dul{display:block}
.gnb_2dul ul{list-style:none;margin:0;padding:0}
.gnb_2da{
  display:block;
  padding:6px 18px !important;
  font-size:12px;
  letter-spacing:0.2px;
  color:var(--ink-soft);
  background:none; /* 그누보드 기본css의 background:#fff 무효화 */
  line-height:1.7; /* 기본css의 line-height:40px 무효화 */
}
.gnb_2da:hover{color:var(--ink);background:none;font-weight:700}

/* 우측 유틸(Blog / Instagram / 로그인) */
#hd_util{
  order:3;
  display:flex;
  align-items:center;
  gap:18px;
  list-style:none;
  margin:0;padding:0;
}
#hd_util li a{
  font-size:13px;
  font-weight:500;
  color:var(--ink);
}
#hd_util li a:hover{text-decoration:underline; text-underline-offset:4px}
#hd_util .hd_util_member{
  font-size:11px;
  color:var(--ink-soft);
  display:flex;gap:8px;
}
#hd_util .hd_util_member a{font-size:11px;color:var(--ink-soft)}

/* 모바일 햄버거 버튼 (PC에서는 숨김) - #hd_wrapper의 형제 요소 (nav 안에 있지 않음) */
#gnb_mobile_btn{
  display:none;
  order:3;
  width:26px;height:20px;
  border:0;background:none;cursor:pointer;
  flex-direction:column;justify-content:space-between;
  padding:0;
  flex-shrink:0;
}
#gnb_mobile_btn span{display:block;height:1.5px;background:var(--ink)}
#gnb_mobile_bg{display:none}

/* -------------------- 콘텐츠 래퍼 -------------------- */
#wrapper{background:var(--bg)}
#container_wr{padding:0}
#container{
  float:none !important;
  width:auto !important;
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--side);
  box-sizing:border-box;
}
#container_title{
  max-width:var(--max);margin:40px auto 0;padding:0 var(--side);
  font-family:'Poppins','Spoqa Han Sans','Apple SD Gothic Neo','Malgun Gothic','Nanum Gothic',sans-serif;font-weight:800;font-size:26px;
}

/* -------------------- 인덱스 히어로 / 프로젝트 섹션 -------------------- */
.hero{
  max-width:var(--max);
  margin:0 auto;
  padding:64px var(--side) 28px;
}
.hero_eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:2px;
  color:var(--ink-soft);margin:0 0 14px;
}
.hero_title{
  font-family:'Poppins','Spoqa Han Sans','Apple SD Gothic Neo','Malgun Gothic','Nanum Gothic',sans-serif;
  font-weight:800;
  font-size:clamp(26px, 4vw, 42px);
  margin:0 0 10px;
  letter-spacing:-0.5px;
}
.hero_desc{font-size:14px;color:var(--ink-soft);margin:0}

.project_section{max-width:var(--max);margin:55px auto;padding:20px var(--side) 100px}
.section_head h2{
  font-family:'Poppins','Spoqa Han Sans','Apple SD Gothic Neo','Malgun Gothic','Nanum Gothic',sans-serif;
  font-weight:800;
  font-size:22px;
  letter-spacing:0.5px;
  margin:0 0 28px;
}
.project_grid_placeholder{
  border:1px dashed var(--line);
  padding:60px 24px;
  text-align:center;
  color:var(--ink-soft);
  font-size:13.5px;
  line-height:1.8;
}
.project_grid_placeholder code{
  background:#f4f4f4;
  padding:2px 6px;
  border-radius:3px;
  font-size:12px;
}

/* 프로젝트 카드 그리드 (latest 스킨: skin/latest/project_grid/latest.skin.php) */
.project_grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:28px 24px;
}
.proj_card{list-style:none}
.proj_card_link{display:block;color:var(--ink)}

.proj_thumb{
  position:relative;
  display:block;
  overflow:hidden;
  background:#f2f2f2;
  aspect-ratio:1/1;
}
.proj_thumb img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1), filter .4s ease;
}
.proj_thumb_empty{
  display:block;width:100%;height:100%;
  background:linear-gradient(150deg,#ececec,#f8f8f8);
}
.proj_card_link:hover .proj_thumb img,
.proj_card_link:hover .proj_thumb_empty{
  transform:scale(1.05);
  filter:brightness(0.7);
}

/* hover 시 이미지 중앙 십자(+) 표시 */
.proj_cross{
  position:absolute;top:50%;left:50%;
  width:44px;height:44px;
  transform:translate(-50%,-50%) scale(0.5);
  opacity:0;
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
  /* .gall_img span에 걸리는 그누보드 기본 회색배경(#eaeaea) 등 상속 스타일 전부 차단 */
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
}
.proj_cross::before,
.proj_cross::after{
  content:"";
  position:absolute;
  background:#fff;
}
.proj_cross::before{top:50%;left:0;right:0;height:1px;transform:translateY(-50%)}
.proj_cross::after{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%)}
.proj_card_link:hover .proj_cross{opacity:1;transform:translate(-50%,-50%) scale(1)}

.proj_info{display:block;margin-top:14px}
.proj_title{
  display:block;
  font-size:15px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:4px;
}
.proj_cat{
  display:block;
  font-size:11.5px;
  color:var(--ink-soft);
  letter-spacing:0.3px;
  margin-bottom:6px;
}

@media (max-width:980px){
  .project_grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:480px){
  .project_grid{grid-template-columns:1fr; gap:32px}
}

/* -------------------- 푸터 -------------------- */
#ft{
  border-top:1px solid var(--line);
  background:var(--bg);
  padding:28px 0;
  position:relative;
}
#ft_wr{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--side);
  box-sizing:border-box;
}
.ft_bottom{
  text-align:center;
  font-size:11.5px;
  color:var(--ink-soft);
}

#top_btn{
  position:fixed;right:24px;bottom:24px;
  width:42px;height:42px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:60;
}
#top_btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* -------------------- 반응형 (모바일) -------------------- */
@media (max-width:900px){
  :root{--side:24px}
}

@media (max-width:720px){
  :root{--nav-h:60px}

  #hd_wrapper{justify-content:space-between}
  #logo{margin-right:0}
  #gnb_mobile_btn{display:flex}

  #gnb{
    order:4;
    flex:none;
    position:fixed;
    top:0;right:0;bottom:0;
    width:78%;
    max-width:320px;
    background:var(--ink);
    transform:translateX(100%);
    transition:transform .3s ease;
    overflow-y:auto;
    padding:calc(var(--nav-h) + 16px) 0 24px;
    z-index:45; /* #gnb_mobile_bg(40)보다 위에 오도록 */
  }
  #hd.gnb_mobile_open #gnb{transform:translateX(0)}
  #hd.gnb_mobile_open #gnb_mobile_bg{
    display:block;
    position:fixed;inset:0;
    background:rgba(0,0,0,0.4);
    z-index:40;
  }

  #gnb .gnb_wrap{flex-direction:column;align-items:stretch;gap:0}
  #gnb_1dul{
    position:static;transform:none;
    flex-direction:column;align-items:stretch;gap:0;width:100%;
  }
  .gnb_1da{
    color:#fff;
    padding:16px 24px;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .gnb_2dul{
    display:none !important; /* ABOUT 하위메뉴는 상위 링크와 동일한 곳으로 가서 모바일에선 불필요 - PC hover 클래스와 얽혀 다른 메뉴와 겹쳐보이던 문제 방지 */
  }
  .gnb_2da{color:#cfcfcf}

  #hd_util{
    flex-direction:column;align-items:flex-start;gap:0;
    padding:20px 24px 0;
    width:100%;
  }
  #gnb #hd_util li a{color:#fff;font-size:13px !important;padding:10px 0}
  #gnb #hd_util .hd_util_member a{color:#bdbdbd}
}



/* ==========================================================================
   일반 페이지 (ABOUT / CONTACT) - /pages/about.php, /pages/contact.php
   ========================================================================== */
.ln_page{padding:48px 0 120px}

/* ABOUT */
.ln_about_intro{
  font-family:'Poppins','Spoqa Han Sans','Apple SD Gothic Neo','Malgun Gothic','Nanum Gothic',sans-serif;
  font-weight:500;
  font-size:clamp(20px,2.4vw,26px);
  line-height:1.65;
  color:var(--ink);
  max-width:760px;
  margin:0 0 72px;
}

.ln_about_values{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin:0 0 72px;
}
.ln_value_item{
  border-top:1px solid var(--ink);
  padding-top:20px;
}
.ln_value_item .num{
  display:block;
  font-family:'Space Mono','Pretendard',monospace;
  font-size:11px;
  color:var(--ink-soft);
  letter-spacing:1px;
  margin-bottom:14px;
}
.ln_value_item h3{
  font-family:'Poppins','Spoqa Han Sans','Apple SD Gothic Neo','Malgun Gothic','Nanum Gothic',sans-serif;
  font-weight:700;
  font-size:16px;
  margin:0 0 10px;
}
.ln_value_item p{
  font-size:13px;
  line-height:1.8;
  color:var(--ink-soft);
  margin:0;
}

.ln_about_stats{
  display:flex;
  flex-wrap:wrap;
  gap:56px;
  padding-top:40px;
  border-top:1px solid var(--line);
}
.ln_stat_item .stat_num{
  display:block;
  font-family:'Poppins','Spoqa Han Sans','Apple SD Gothic Neo','Malgun Gothic','Nanum Gothic',sans-serif;
  font-weight:800;
  font-size:clamp(28px,3.4vw,40px);
  color:var(--ink);
  line-height:1;
  margin-bottom:8px;
}
.ln_stat_item .stat_label{
  font-size:12px;
  color:var(--ink-soft);
  letter-spacing:0.3px;
}

/* CONTACT - 참고 사이트(siotspace.com/Contact)와 동일한 구조: 전체 가운데 정렬, 섹션 나열 */
.ln_contact_page{
  max-width:640px;
  margin:0 auto;
  padding:80px 0 140px;
  text-align:center;
}
.ln_contact_block{margin-bottom:110px}
.ln_contact_block:last-child{margin-bottom:0}

.ln_contact_h{
  font-family:'Poppins','Spoqa Han Sans','Apple SD Gothic Neo','Malgun Gothic','Nanum Gothic',sans-serif;
  font-weight:500;
  font-size:22px;
  color:var(--ink);
  margin:0 0 28px;
}
.ln_contact_en{
  font-size:13.5px;
  line-height:1.8;
  color:var(--ink-soft);
  margin:0 0 6px;
}
.ln_contact_kr{
  font-size:13.5px;
  line-height:1.8;
  color:var(--ink-soft);
  margin:0 0 32px;
}
.ln_contact_block .ln_contact_kr:first-of-type{margin-top:0}

.ln_contact_lines{
  list-style:none;margin:0 0 32px;padding:0;
}
.ln_contact_lines li{
  font-size:14px;
  line-height:2;
  color:var(--ink);
}
.ln_contact_lines span{
  color:var(--ink-soft);
  margin-right:4px;
}
.ln_contact_lines a{color:var(--ink)}
.ln_contact_lines a:hover{text-decoration:underline}

.ln_contact_icons{
  display:flex;justify-content:center;gap:12px;
}
.ln_contact_icons a{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;
  font-size:15px;
  transition:opacity .2s ease;
}
.ln_contact_icons a:hover{opacity:0.75}

.ln_contact_addr{
  font-size:13.5px;
  line-height:2;
  color:var(--ink-soft);
  margin:0;
}

@media (max-width:760px){
  .ln_about_values{grid-template-columns:1fr;gap:32px}
  .ln_about_stats{gap:36px}
  .ln_contact_page{padding:56px 0 100px}
  .ln_contact_block{margin-bottom:72px}
}