/* ============================================
   Enlive Space - Custom Styles
   v1.0 (홈페이지 수정 v1.0_0423 반영)
   ============================================ */

/* ---- Web Fonts ---- */
/* 한글: 나눔스퀘어 */
@import url('https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css');

/* 영문: G마켓 산스 Medium */
@font-face {
  font-family: 'GmarketSansMedium';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GmarketSansBold';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {
  --color-bg: #ffffff;
  --color-bg-alt: #f7f7f7;
  --color-text: #171717;
  --color-text-2: #525252;
  --color-text-3: #a3a3a3;
  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-strong: rgba(0, 0, 0, 0.15);
  --color-footer-bg: #171717;
  --color-footer-text: #ffffff;
  --color-accent: #F2D679; /* 베이지 — 플로팅 상담신청 배경 + 카카오톡 말풍선 */
  --color-kakao-bg: #171717; /* 검정 — 플로팅 카카오톡 배경 */
  --header-height: 64px;
  --container-max: 1440px;
  --padding-x: 20px;
}

@media (min-width: 640px) {
  :root {
    --header-height: 72px;
    --padding-x: 32px;
  }
}

@media (min-width: 1024px) {
  :root {
    --header-height: 76px;
    --padding-x: 48px;
  }
}

/* ---- Reset ---- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'NanumSquare', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* 한글이 단어 중간에서 끊기지 않도록 — CJK 는 단어(어절) 단위, 영문은 공백 기준.
     overflow-wrap 은 매우 긴 토큰(URL 등) 이 컨테이너를 넘칠 때의 안전망. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ---- Typography helpers ---- */
.font-en {
  font-family: 'GmarketSansMedium', 'Inter', sans-serif;
  letter-spacing: -0.01em;
}

.font-en-bold {
  font-family: 'GmarketSansBold', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

.font-kr {
  font-family: 'NanumSquare', 'Noto Sans KR', sans-serif;
}

/* ════════════════════════════════════════════════════════════════════
   글자 크기 미세조정 — 아래 :root 의 4개 변수 값만 바꾸면 전역 반영된다.
     · 값 1 = Tailwind 기본 크기,  0.88 = −12%,  1.05 = +5% …
     · 본문(body)   = text-xs · text-sm · text-base · text-lg · text-xl
     · 타이틀(title) = text-2xl · text-3xl · text-4xl · text-5xl · text-6xl
     · 모바일(폰 <640px) 과 PC(≥640px) 를, 본문/타이틀 각각 독립 조절
   조절 위치: 바로 아래 :root 블록 (이 파일 css/style.css 안)
   ════════════════════════════════════════════════════════════════════ */
:root {
  --fs-body-mobile: 0.88;   /* 모바일 본문 배수 */
  --fs-title-mobile: 0.88;  /* 모바일 타이틀 배수 */
  --fs-body-pc: 1;          /* PC 본문 배수 */
  --fs-title-pc: 1;         /* PC 타이틀 배수 */
}

/* Tailwind text-* 를 위 변수 배수로 override.
   html 셀렉터로 specificity(0,1,1)를 높여 Tailwind CDN 주입 순서와 무관하게 우선 적용.
   각 값 = Tailwind 기본 font-size / line-height (rem) × 변수. */

/* 모바일: 폰 (<640px) — 기본 text-* */
@media (max-width: 639px) {
  html .text-xs   { font-size: calc(0.75rem  * var(--fs-body-mobile));  line-height: calc(1rem    * var(--fs-body-mobile)); }
  html .text-sm   { font-size: calc(0.875rem * var(--fs-body-mobile));  line-height: calc(1.25rem * var(--fs-body-mobile)); }
  html .text-base { font-size: calc(1rem     * var(--fs-body-mobile));  line-height: calc(1.5rem  * var(--fs-body-mobile)); }
  html .text-lg   { font-size: calc(1.125rem * var(--fs-body-mobile));  line-height: calc(1.75rem * var(--fs-body-mobile)); }
  html .text-xl   { font-size: calc(1.25rem  * var(--fs-body-mobile));  line-height: calc(1.75rem * var(--fs-body-mobile)); }
  html .text-2xl  { font-size: calc(1.5rem   * var(--fs-title-mobile)); line-height: calc(2rem    * var(--fs-title-mobile)); }
  html .text-3xl  { font-size: calc(1.875rem * var(--fs-title-mobile)); line-height: calc(2.25rem * var(--fs-title-mobile)); }
  html .text-4xl  { font-size: calc(2.25rem  * var(--fs-title-mobile)); line-height: calc(2.5rem  * var(--fs-title-mobile)); }
}

/* PC: ≥640px (Tailwind sm) — 기본 + sm: 반응형 변형.
   기본→sm 순으로 정의해 동일 specificity 에서 큰 화면 변형(sm:)이 우선되게 함(Tailwind 동작 재현). */
@media (min-width: 640px) {
  html .text-xs,   html .sm\:text-xs   { font-size: calc(0.75rem  * var(--fs-body-pc));  line-height: calc(1rem    * var(--fs-body-pc)); }
  html .text-sm,   html .sm\:text-sm   { font-size: calc(0.875rem * var(--fs-body-pc));  line-height: calc(1.25rem * var(--fs-body-pc)); }
  html .text-base, html .sm\:text-base { font-size: calc(1rem     * var(--fs-body-pc));  line-height: calc(1.5rem  * var(--fs-body-pc)); }
  html .text-lg,   html .sm\:text-lg   { font-size: calc(1.125rem * var(--fs-body-pc));  line-height: calc(1.75rem * var(--fs-body-pc)); }
  html .text-xl,   html .sm\:text-xl   { font-size: calc(1.25rem  * var(--fs-body-pc));  line-height: calc(1.75rem * var(--fs-body-pc)); }
  html .text-2xl,  html .sm\:text-2xl  { font-size: calc(1.5rem   * var(--fs-title-pc)); line-height: calc(2rem    * var(--fs-title-pc)); }
  html .text-3xl,  html .sm\:text-3xl  { font-size: calc(1.875rem * var(--fs-title-pc)); line-height: calc(2.25rem * var(--fs-title-pc)); }
  html .text-4xl                       { font-size: calc(2.25rem  * var(--fs-title-pc)); line-height: calc(2.5rem  * var(--fs-title-pc)); }
  html .sm\:text-5xl { font-size: calc(3rem    * var(--fs-title-pc)); line-height: 1; }
  html .sm\:text-6xl { font-size: calc(3.75rem * var(--fs-title-pc)); line-height: 1; }
}

/* PC: ≥768px (Tailwind md) — md: 반응형 변형 (640 블록보다 뒤라 768px↑ 에서 우선) */
@media (min-width: 768px) {
  html .md\:text-4xl { font-size: calc(2.25rem  * var(--fs-title-pc)); line-height: calc(2.5rem * var(--fs-title-pc)); }
  html .md\:text-6xl { font-size: calc(3.75rem  * var(--fs-title-pc)); line-height: 1; }
}

::selection {
  background: rgba(0, 0, 0, 0.08);
}

/* ---- Site Header (고정 GNB · 흰색 배경) ---- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.site-header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--padding-x);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'GmarketSansMedium', sans-serif;
  font-size: 20px;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.site-logo img {
  height: 38px;
  width: auto;
  display: block;
}

@media (min-width: 768px) {
  .site-logo {
    font-size: 22px;
  }
  .site-logo img {
    height: 44px;
  }
}
@media (min-width: 1024px) {
  .site-logo img {
    height: 48px;
  }
}

.site-nav {
  display: none;
  gap: 28px;
  align-items: center;
}

@media (min-width: 1024px) {
  .site-nav {
    display: flex;
  }
}

.site-nav a {
  color: var(--color-text);
  text-decoration: none;
  font-family: 'NanumSquare', sans-serif;
  font-size: 15px;
  font-weight: 700;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a.active {
  opacity: 0.55;
}

/* mobile menu trigger */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
}

@media (min-width: 1024px) {
  .menu-toggle {
    display: none;
  }
}

/* mobile overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(23, 23, 23, 0.97);
  backdrop-filter: blur(10px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  color: #fff;
}
.mobile-menu.is-open {
  display: flex;
}
.mobile-menu a {
  color: #fff;
  text-decoration: none;
  font-family: 'NanumSquare', sans-serif;
  font-size: 22px;
  font-weight: 700;
  transition: opacity 0.2s ease;
}
.mobile-menu a:hover { opacity: 0.7; }
.mobile-menu .menu-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

/* main wrapper offset (헤더 높이만큼 padding) */
.site-main {
  padding-top: var(--header-height);
}
.site-main--hero {
  padding-top: 0; /* hero가 풀스크린일 때 */
}

/* ---- Floating Action Button (FAB · 상담신청 + 카카오문의 통합) ---- */
/* 평소엔 1개 토글 버튼(상담 ↔ 카카오 크로스페이드), 누르면 두 버튼이 위로 펼쳐짐 */
/* 컨테이너는 메인 버튼 크기 그대로(항목은 absolute라 공간 차지 안 함) → 항상 화면 구석에 고정 */
.fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 45;
  width: 60px;
  height: 60px;
}
@media (min-width: 768px) {
  .fab { right: 24px; bottom: 24px; }
}

/* 메인 토글 버튼 */
.fab-main {
  position: relative;
  z-index: 2;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.20);
  cursor: pointer;
  border: none;
  padding: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fab-main:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24); }

/* 메인 버튼 안의 '얼굴' — consult / kakao / close 가 겹쳐서 크로스페이드 */
.fab-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'NanumSquare', sans-serif;
  font-weight: 900;
  font-size: 12px;
  line-height: 1.15;
  text-align: center;
  letter-spacing: -0.02em;
  transition: opacity 0.6s ease;
}
.fab-face--consult { background: var(--color-accent); color: #171717; }
.fab-face--kakao { background: var(--color-kakao-bg); color: var(--color-accent); }
.fab-face--close { background: var(--color-kakao-bg); color: #fff; opacity: 0; }

/* 닫힘 상태: consult ↔ kakao 7초 주기 크로스페이드 */
.fab:not(.is-open) .fab-face--consult { animation: fabCross 7s ease-in-out infinite; }
.fab:not(.is-open) .fab-face--kakao { animation: fabCross 7s ease-in-out infinite; animation-delay: -3.5s; }
@keyframes fabCross { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }

/* 열림 상태: 얼굴은 close(X)만 표시 */
.fab.is-open .fab-face--consult,
.fab.is-open .fab-face--kakao { opacity: 0; animation: none; }
.fab.is-open .fab-face--close { opacity: 1; }

/* 펼침 항목 (상담 / 카카오) — 평소 숨김, 열림 시 위로 튀어나옴 */
.fab-item {
  position: absolute;
  left: 2px; /* 메인(60) 대비 항목(56) 중앙 정렬: (60-56)/2 */
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: 'NanumSquare', sans-serif;
  font-weight: 900;
  font-size: 12px;
  line-height: 1.15;
  text-align: center;
  letter-spacing: -0.02em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.6);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s;
}
/* 메인 버튼 위로 스택 (bottom 기준): kakao = main(60)+gap(12), consult = 그 위 +item(56)+gap(12) */
.fab-item--kakao { background: var(--color-kakao-bg); color: var(--color-accent); bottom: 72px; }
.fab-item--consult { background: var(--color-accent); color: #171717; bottom: 140px; }
.fab.is-open .fab-item { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }
.fab.is-open .fab-item--kakao { transition-delay: 0.04s; }
.fab.is-open .fab-item--consult { transition-delay: 0.09s; }

/* ---- Site Footer (검정 배경) ---- */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: 64px 0 32px;
  margin-top: auto;
  font-family: 'NanumSquare', 'Noto Sans KR', sans-serif;
}
.site-footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--padding-x);
}

/* Footer top: logo + columns */
.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 768px) {
  .footer-top {
    grid-template-columns: 220px 1fr;
    gap: 48px;
    align-items: flex-start;
  }
}
@media (min-width: 1024px) {
  .footer-top {
    grid-template-columns: 260px 1fr;
    gap: 64px;
  }
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  font-family: 'GmarketSansBold', sans-serif;
  font-size: 26px;
  letter-spacing: 0.04em;
  color: #fff;
  text-decoration: none;
  line-height: 1.15;
}
.footer-logo img {
  height: 64px;
  width: auto;
  display: block;
}
@media (min-width: 768px) {
  .footer-logo img {
    height: 72px;
  }
}

/* Footer columns wrapper */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 24px;
}
@media (min-width: 768px) {
  .footer-cols {
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: 32px;
  }
}

.footer-col-title {
  font-family: 'NanumSquare', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}

.footer-col-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.footer-col-list a,
.footer-col-list li {
  font-family: 'NanumSquare', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  transition: color 0.2s ease;
  line-height: 1.55;
}
.footer-col-list a:hover {
  color: #fff;
}

.footer-contact-line {
  font-family: 'NanumSquare', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.55;
}
.footer-contact-line .label {
  color: rgba(255, 255, 255, 0.6);
  margin-right: 6px;
}
.footer-contact-line a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-contact-line a:hover {
  color: #fff;
}

/* SNS row */
.footer-sns {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.footer-sns a {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.footer-sns a:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}
.footer-sns svg {
  width: 18px;
  height: 18px;
}

/* Footer bottom: company info + copyright */
.footer-bottom {
  padding-top: 24px;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 14px;
}
.footer-legal a {
  font-family: 'NanumSquare', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-legal a:hover {
  color: #fff;
}
.footer-legal .divider {
  color: rgba(255, 255, 255, 0.25);
  font-weight: 400;
}

.footer-info {
  font-family: 'NanumSquare', sans-serif;
  font-size: 12px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.5);
}
.footer-info .info-line {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
}
.footer-info .info-line .sep {
  color: rgba(255, 255, 255, 0.25);
}
.footer-info .copyright {
  margin-top: 10px;
  font-family: 'GmarketSansMedium', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.02em;
}

/* ---- Image Placeholder (파일 교체 안내용 - 파일명 큼직하게) ---- */
.ph-img {
  position: relative;
  background: #ECECEC;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #6b6b6b;
  overflow: hidden;
}
.ph-img::before {
  content: attr(data-filename);
  font-family: 'GmarketSansBold', monospace;
  font-size: clamp(16px, 4vw, 36px);
  font-weight: 700;
  color: #2c2c2c;
  letter-spacing: -0.01em;
  word-break: break-all;
  padding: 0 16px;
}
.ph-img::after {
  content: attr(data-size);
  font-family: 'GmarketSansMedium', monospace;
  font-size: clamp(11px, 1.4vw, 13px);
  margin-top: 10px;
  color: #888;
  letter-spacing: 0.02em;
}
.ph-img--dark {
  background: #2a2a2a;
}
.ph-img--dark::before { color: #f0f0f0; }
.ph-img--dark::after { color: #aaa; }

/* ---- Animations ---- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.8s ease-out 0.2s both;
}

/* ---- Hero slider helper ---- */
#hero-slider {
  will-change: transform;
}

/* ---- Scrollbar (subtle) ---- */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* ---- Buttons base ---- */
button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}

/* input focus */
input:focus {
  outline: none;
}

/* ---- Section heading common ---- */
.section-eyebrow {
  font-family: 'GmarketSansMedium', sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

/* thumbnail active state for project detail */
.thumbnail-item {
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
.thumbnail-item.active {
  opacity: 1;
}

/* ---- Pager (페이지네이션) ---- */
.pager-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  transition: all 0.2s ease;
  font-family: 'GmarketSansMedium', sans-serif;
  background: transparent;
  color: var(--color-text);
}
.pager-btn:hover {
  background: #171717;
  color: #fff;
  border-color: #171717;
}
.pager-btn.active {
  background: #171717;
  color: #fff;
  border-color: #171717;
}

@media (max-width: 480px) {
  .fab-main { width: 54px; height: 54px; }
  .fab-item { width: 50px; height: 50px; }
}