/*
 * ============================================================
 * ELIF (엘리프) DESIGN SYSTEM — 계룡건설산업
 * Source: https://elif.krcon.co.kr/brand/bi
 * Extracted: 2026-04-12
 *
 * 브랜드 철학: "일상을 새롭게 하다"
 * 심볼: LIFE → ELIF (삶을 다르게 보는 시각)
 * 핵심가치: Insight · Honesty · Difference · Refresh
 * ============================================================
 */

/* ============================================================
   1. BRAND COLOR PALETTE
   ============================================================ */

:root {
  /* ── Primary ── */
  --elif-green:        #054438;   /* ELIF GREEN  PANTONE 3308C — 진정한 휴식과 새로움 */
  --elif-pale-green:   #EBE9DC;   /* ELIF PALE GREEN */
  --elif-lime:         #DADDB9;   /* ELIF LIME */
  --elif-beige:        #C8BAA7;   /* ELIF BEIGE */
  --elif-warm-gray:    #787472;   /* ELIF WARM GRAY */

  /* ── Extended ── */
  --elif-green-dark:   #032b22;   /* green 더 어두운 버전 */
  --elif-green-mid:    #0a6b54;   /* green 중간 */
  --elif-green-light:  #1a9070;   /* green 밝은 버전 */
  --elif-green-tint:   #d0e8e3;   /* green 아주 연한 버전 */

  --elif-cream:        #F5F3EB;   /* pale-green 더 밝게 */
  --elif-sand:         #B5A898;   /* beige 진한 버전 */
  --elif-gray-light:   #E8E7E6;   /* warm gray 연한 버전 */
  --elif-gray-dark:    #4A4847;   /* warm gray 진한 버전 */

  --elif-black:        #1A1A1A;
  --elif-white:        #FFFFFF;

  /* ── Semantic ── */
  --elif-bg:           var(--elif-white);
  --elif-bg-alt:       var(--elif-cream);
  --elif-bg-dark:      var(--elif-green);
  --elif-text:         var(--elif-black);
  --elif-text-muted:   var(--elif-warm-gray);
  --elif-text-on-dark: var(--elif-pale-green);
  --elif-border:       var(--elif-lime);
  --elif-border-dark:  rgba(255,255,255,0.15);

  --elif-accent:       var(--elif-green);
  --elif-accent-hover: var(--elif-green-dark);
  --elif-accent-soft:  var(--elif-green-tint);

  /* ============================================================
     2. TYPOGRAPHY
     ============================================================ */

  /* 폰트 스택 — 브랜드 사이트 Noto Serif 계열 사용 추정 */
  --elif-font-serif:  "Noto Serif KR", "Noto Serif", "Malgun Gothic", Georgia, serif;
  --elif-font-sans:   "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --elif-font-en:     "Libre Baskerville", "Georgia", serif; /* ELIF 영문 로고 계열 */

  /* 폰트 웨이트 */
  --elif-weight-light:    300;
  --elif-weight-regular:  400;
  --elif-weight-medium:   500;
  --elif-weight-semibold: 600;
  --elif-weight-bold:     700;

  /* 폰트 사이즈 스케일 */
  --elif-text-xs:   0.75rem;    /* 12px */
  --elif-text-sm:   0.875rem;   /* 14px */
  --elif-text-base: 1rem;       /* 16px */
  --elif-text-md:   1.125rem;   /* 18px */
  --elif-text-lg:   1.25rem;    /* 20px */
  --elif-text-xl:   1.5rem;     /* 24px */
  --elif-text-2xl:  1.875rem;   /* 30px */
  --elif-text-3xl:  2.25rem;    /* 36px */
  --elif-text-4xl:  3rem;       /* 48px */
  --elif-text-5xl:  3.75rem;    /* 60px */
  --elif-text-hero: clamp(2.5rem, 6vw, 5rem);

  /* 행간 */
  --elif-lh-tight:  1.2;
  --elif-lh-snug:   1.4;
  --elif-lh-normal: 1.6;
  --elif-lh-relaxed: 1.8;
  --elif-lh-loose:  2.0;

  /* 자간 */
  --elif-ls-tight:  -0.03em;
  --elif-ls-normal: -0.01em;
  --elif-ls-wide:    0.05em;
  --elif-ls-wider:   0.1em;
  --elif-ls-widest:  0.2em;

  /* ============================================================
     3. SPACING
     ============================================================ */

  --elif-space-1:   0.25rem;    /* 4px */
  --elif-space-2:   0.5rem;     /* 8px */
  --elif-space-3:   0.75rem;    /* 12px */
  --elif-space-4:   1rem;       /* 16px */
  --elif-space-5:   1.25rem;    /* 20px */
  --elif-space-6:   1.5rem;     /* 24px */
  --elif-space-8:   2rem;       /* 32px */
  --elif-space-10:  2.5rem;     /* 40px */
  --elif-space-12:  3rem;       /* 48px */
  --elif-space-16:  4rem;       /* 64px */
  --elif-space-20:  5rem;       /* 80px */
  --elif-space-24:  6rem;       /* 96px */
  --elif-space-32:  8rem;       /* 128px */

  /* 섹션 패딩 */
  --elif-section-py:     clamp(4rem, 8vw, 8rem);
  --elif-section-py-sm:  clamp(2.5rem, 5vw, 5rem);

  /* ============================================================
     4. LAYOUT
     ============================================================ */

  --elif-container-max: 1280px;
  --elif-container-px:  clamp(1rem, 5vw, 4rem);
  --elif-nav-height:    80px;

  /* ============================================================
     5. BORDER & RADIUS
     ============================================================ */

  --elif-radius-sm:   2px;
  --elif-radius-md:   4px;
  --elif-radius-lg:   8px;
  --elif-radius-xl:   16px;
  --elif-radius-full: 9999px;

  /* ============================================================
     6. SHADOW
     ============================================================ */

  --elif-shadow-sm:  0 2px 8px rgba(5, 68, 56, 0.08);
  --elif-shadow-md:  0 8px 24px rgba(5, 68, 56, 0.12);
  --elif-shadow-lg:  0 20px 48px rgba(5, 68, 56, 0.16);
  --elif-shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.4);

  /* ============================================================
     7. MOTION
     ============================================================ */

  --elif-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --elif-ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --elif-ease-gentle:   cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --elif-duration-fast:   150ms;
  --elif-duration-normal: 300ms;
  --elif-duration-slow:   600ms;
  --elif-duration-slower: 900ms;

  /* ============================================================
     8. Z-INDEX
     ============================================================ */

  --elif-z-below:   -1;
  --elif-z-base:     0;
  --elif-z-raised:  10;
  --elif-z-nav:    100;
  --elif-z-modal:  200;
  --elif-z-toast:  300;
}

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--elif-font-sans);
  font-size: var(--elif-text-base);
  font-weight: var(--elif-weight-regular);
  line-height: var(--elif-lh-relaxed);
  letter-spacing: var(--elif-ls-normal);
  color: var(--elif-text);
  background: var(--elif-bg);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   CONTAINER
   ============================================================ */

.elif-container {
  max-width: var(--elif-container-max);
  margin-inline: auto;
  padding-inline: var(--elif-container-px);
}

.elif-container--narrow {
  max-width: 860px;
  margin-inline: auto;
  padding-inline: var(--elif-container-px);
}

/* ============================================================
   SECTION
   ============================================================ */

.elif-section {
  padding-block: var(--elif-section-py);
}
.elif-section--sm {
  padding-block: var(--elif-section-py-sm);
}
.elif-section--dark {
  background: var(--elif-bg-dark);
  color: var(--elif-text-on-dark);
}
.elif-section--cream {
  background: var(--elif-bg-alt);
}
.elif-section--pale {
  background: var(--elif-pale-green);
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */

.elif-eyebrow {
  font-family: var(--elif-font-en);
  font-size: var(--elif-text-sm);
  font-weight: var(--elif-weight-regular);
  letter-spacing: var(--elif-ls-widest);
  text-transform: uppercase;
  color: var(--elif-accent);
  margin-bottom: var(--elif-space-3);
}
.elif-section--dark .elif-eyebrow { color: var(--elif-lime); }

.elif-heading {
  font-family: var(--elif-font-serif);
  font-weight: var(--elif-weight-light);
  line-height: var(--elif-lh-tight);
  letter-spacing: var(--elif-ls-tight);
  margin: 0 0 var(--elif-space-6);
}
.elif-heading--hero {
  font-size: var(--elif-text-hero);
}
.elif-heading--xl {
  font-size: clamp(2rem, 4vw, 3.5rem);
}
.elif-heading--lg {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
}
.elif-heading--md {
  font-size: clamp(1.375rem, 2.5vw, 2rem);
}
.elif-heading--sm {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
}

.elif-lead {
  font-size: var(--elif-text-lg);
  line-height: var(--elif-lh-relaxed);
  color: var(--elif-text-muted);
  margin-bottom: var(--elif-space-8);
}
.elif-section--dark .elif-lead { color: var(--elif-pale-green); }

.elif-body {
  font-size: var(--elif-text-base);
  line-height: var(--elif-lh-relaxed);
  color: var(--elif-text-muted);
}

.elif-caption {
  font-size: var(--elif-text-sm);
  letter-spacing: var(--elif-ls-wide);
  color: var(--elif-text-muted);
}

/* Decorative divider */
.elif-divider {
  width: 32px;
  height: 1px;
  background: var(--elif-accent);
  margin-block: var(--elif-space-6);
}
.elif-section--dark .elif-divider { background: var(--elif-lime); }
.elif-divider--center { margin-inline: auto; }
.elif-divider--wide { width: 60px; }

/* ============================================================
   BUTTONS
   ============================================================ */

.elif-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--elif-space-2);
  font-family: var(--elif-font-sans);
  font-size: var(--elif-text-sm);
  font-weight: var(--elif-weight-medium);
  letter-spacing: var(--elif-ls-wider);
  text-transform: uppercase;
  padding: var(--elif-space-4) var(--elif-space-8);
  border: 1px solid transparent;
  border-radius: var(--elif-radius-sm);
  cursor: pointer;
  transition:
    background var(--elif-duration-normal) var(--elif-ease-out),
    color      var(--elif-duration-normal) var(--elif-ease-out),
    border-color var(--elif-duration-normal) var(--elif-ease-out),
    transform  var(--elif-duration-fast) var(--elif-ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.elif-btn:hover  { transform: translateY(-1px); }
.elif-btn:active { transform: translateY(0); }

/* Primary */
.elif-btn--primary {
  background: var(--elif-green);
  color: var(--elif-white);
  border-color: var(--elif-green);
}
.elif-btn--primary:hover {
  background: var(--elif-green-dark);
  border-color: var(--elif-green-dark);
}

/* Outline (라이트 배경용) */
.elif-btn--outline {
  background: transparent;
  color: var(--elif-green);
  border-color: var(--elif-green);
}
.elif-btn--outline:hover {
  background: var(--elif-green);
  color: var(--elif-white);
}

/* Outline Ghost (다크 배경용) */
.elif-btn--ghost {
  background: transparent;
  color: var(--elif-pale-green);
  border-color: rgba(235, 233, 220, 0.4);
}
.elif-btn--ghost:hover {
  background: rgba(235, 233, 220, 0.15);
  border-color: var(--elif-pale-green);
}

/* CTA (히어로용 강조 버튼) */
.elif-btn--cta {
  background: var(--elif-pale-green);
  color: var(--elif-green-dark);
  border-color: var(--elif-pale-green);
  font-size: var(--elif-text-base);
  padding: var(--elif-space-4) var(--elif-space-10);
}
.elif-btn--cta:hover {
  background: var(--elif-white);
  border-color: var(--elif-white);
}

/* Sizes */
.elif-btn--sm {
  font-size: var(--elif-text-xs);
  padding: var(--elif-space-2) var(--elif-space-5);
}
.elif-btn--lg {
  font-size: var(--elif-text-base);
  padding: var(--elif-space-5) var(--elif-space-12);
  letter-spacing: var(--elif-ls-widest);
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.elif-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--elif-nav-height);
  display: flex;
  align-items: center;
  z-index: var(--elif-z-nav);
  transition:
    background var(--elif-duration-normal) var(--elif-ease-out),
    box-shadow  var(--elif-duration-normal) var(--elif-ease-out);
}
.elif-nav--transparent { background: transparent; }
.elif-nav--solid {
  background: var(--elif-white);
  box-shadow: var(--elif-shadow-sm);
}
.elif-nav--dark {
  background: var(--elif-green);
}

.elif-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--elif-container-max);
  margin-inline: auto;
  padding-inline: var(--elif-container-px);
}

.elif-nav-logo {
  font-family: var(--elif-font-en);
  font-size: 1.375rem;
  font-weight: var(--elif-weight-bold);
  letter-spacing: 0.2em;
  color: var(--elif-green);
}
.elif-nav--dark .elif-nav-logo,
.elif-nav--transparent .elif-nav-logo { color: var(--elif-pale-green); }

.elif-nav-links {
  display: flex;
  align-items: center;
  gap: var(--elif-space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}
.elif-nav-link {
  font-size: var(--elif-text-sm);
  letter-spacing: var(--elif-ls-wide);
  color: var(--elif-black);
  transition: color var(--elif-duration-fast);
}
.elif-nav--dark .elif-nav-link,
.elif-nav--transparent .elif-nav-link { color: var(--elif-pale-green); }
.elif-nav-link:hover { color: var(--elif-green); }
.elif-nav--dark .elif-nav-link:hover { color: var(--elif-lime); }

/* ============================================================
   CARDS
   ============================================================ */

/* Feature card */
.elif-card {
  background: var(--elif-white);
  border: 1px solid var(--elif-gray-light);
  border-radius: var(--elif-radius-md);
  overflow: hidden;
  transition:
    box-shadow var(--elif-duration-normal) var(--elif-ease-out),
    transform  var(--elif-duration-normal) var(--elif-ease-out);
}
.elif-card:hover {
  box-shadow: var(--elif-shadow-md);
  transform: translateY(-4px);
}
.elif-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.elif-card-body {
  padding: var(--elif-space-6);
}
.elif-card-title {
  font-family: var(--elif-font-serif);
  font-size: var(--elif-text-xl);
  font-weight: var(--elif-weight-light);
  letter-spacing: var(--elif-ls-tight);
  margin: 0 0 var(--elif-space-3);
}
.elif-card-desc {
  font-size: var(--elif-text-sm);
  line-height: var(--elif-lh-relaxed);
  color: var(--elif-text-muted);
  margin: 0;
}

/* Stat card */
.elif-stat {
  text-align: center;
  padding: var(--elif-space-8) var(--elif-space-6);
  border: 1px solid rgba(255,255,255,0.15);
}
.elif-stat-value {
  display: block;
  font-family: var(--elif-font-en);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: var(--elif-weight-light);
  letter-spacing: -0.02em;
  color: var(--elif-pale-green);
  margin-bottom: var(--elif-space-2);
}
.elif-stat-unit {
  font-size: 0.5em;
  vertical-align: super;
}
.elif-stat-label {
  font-size: var(--elif-text-sm);
  letter-spacing: var(--elif-ls-wide);
  color: var(--elif-lime);
}

/* Info table card */
.elif-info-table {
  width: 100%;
  border-collapse: collapse;
}
.elif-info-table th,
.elif-info-table td {
  padding: var(--elif-space-4) var(--elif-space-5);
  text-align: left;
  border-bottom: 1px solid var(--elif-gray-light);
  font-size: var(--elif-text-sm);
  line-height: var(--elif-lh-snug);
}
.elif-info-table th {
  width: 30%;
  font-weight: var(--elif-weight-medium);
  color: var(--elif-text-muted);
  background: var(--elif-cream);
}
.elif-info-table td { color: var(--elif-text); }

/* ============================================================
   FORM
   ============================================================ */

.elif-form-group { margin-bottom: var(--elif-space-5); }
.elif-form-label {
  display: block;
  font-size: var(--elif-text-sm);
  font-weight: var(--elif-weight-medium);
  letter-spacing: var(--elif-ls-wide);
  color: var(--elif-text-muted);
  margin-bottom: var(--elif-space-2);
}
.elif-form-input,
.elif-form-select,
.elif-form-textarea {
  width: 100%;
  padding: var(--elif-space-4) var(--elif-space-4);
  font-family: var(--elif-font-sans);
  font-size: var(--elif-text-base);
  color: var(--elif-text);
  background: var(--elif-white);
  border: 1px solid var(--elif-border);
  border-radius: var(--elif-radius-md);
  outline: none;
  transition: border-color var(--elif-duration-fast);
  -webkit-appearance: none;
  appearance: none;
}
.elif-form-input:focus,
.elif-form-select:focus,
.elif-form-textarea:focus {
  border-color: var(--elif-green);
  box-shadow: 0 0 0 3px var(--elif-accent-soft);
}
.elif-form-textarea {
  resize: vertical;
  min-height: 120px;
}
.elif-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--elif-space-4);
}
@media (max-width: 600px) {
  .elif-form-row { grid-template-columns: 1fr; }
}

/* Consent checkbox */
.elif-checkbox-wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--elif-space-3);
  font-size: var(--elif-text-sm);
  color: var(--elif-text-muted);
}
.elif-checkbox-wrap input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--elif-green);
  flex-shrink: 0;
}

/* ============================================================
   GRID UTILITIES
   ============================================================ */

.elif-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--elif-space-8);
}
.elif-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--elif-space-6);
}
.elif-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--elif-space-6);
}
@media (max-width: 1024px) {
  .elif-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .elif-grid-2,
  .elif-grid-3,
  .elif-grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   HERO OVERLAYS
   ============================================================ */

.elif-hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(5, 68, 56, 0.55) 0%,
    rgba(5, 68, 56, 0.3)  40%,
    rgba(5, 68, 56, 0.7)  100%
  );
}
.elif-hero-overlay--light {
  background: linear-gradient(
    to right,
    rgba(5, 68, 56, 0.75) 0%,
    rgba(5, 68, 56, 0.0)  60%
  );
}

/* ============================================================
   BADGES / TAGS
   ============================================================ */

.elif-tag {
  display: inline-block;
  font-size: var(--elif-text-xs);
  font-weight: var(--elif-weight-medium);
  letter-spacing: var(--elif-ls-wider);
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--elif-radius-full);
}
.elif-tag--green {
  background: var(--elif-accent-soft);
  color: var(--elif-green-dark);
}
.elif-tag--lime {
  background: var(--elif-lime);
  color: var(--elif-green-dark);
}
.elif-tag--beige {
  background: var(--elif-beige);
  color: var(--elif-gray-dark);
}

/* ============================================================
   BRAND VALUE ICONS
   Insight · Honesty · Difference · Refresh
   ============================================================ */

.elif-value {
  text-align: center;
  padding: var(--elif-space-8) var(--elif-space-4);
}
.elif-value-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--elif-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--elif-space-4);
  font-size: 1.5rem;
  color: var(--elif-green);
}
.elif-value-en {
  font-family: var(--elif-font-en);
  font-size: var(--elif-text-sm);
  letter-spacing: var(--elif-ls-widest);
  text-transform: uppercase;
  color: var(--elif-accent);
  margin-bottom: var(--elif-space-1);
}
.elif-value-kr {
  font-size: var(--elif-text-base);
  font-weight: var(--elif-weight-medium);
  margin-bottom: var(--elif-space-2);
}
.elif-value-desc {
  font-size: var(--elif-text-sm);
  line-height: var(--elif-lh-relaxed);
  color: var(--elif-text-muted);
}

/* ============================================================
   RESPONSIVE UTILITIES
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --elif-nav-height: 64px;
    --elif-section-py: clamp(3rem, 6vw, 5rem);
  }
  .elif-hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .elif-hide-desktop { display: none !important; }
}

/* ============================================================
   SCROLL ANIMATION HELPERS
   ============================================================ */

.elif-fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity  var(--elif-duration-slow) var(--elif-ease-out),
    transform var(--elif-duration-slow) var(--elif-ease-out);
}
.elif-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.elif-fade-up[data-delay="100"] { transition-delay: 100ms; }
.elif-fade-up[data-delay="200"] { transition-delay: 200ms; }
.elif-fade-up[data-delay="300"] { transition-delay: 300ms; }
.elif-fade-up[data-delay="400"] { transition-delay: 400ms; }
.elif-fade-up[data-delay="500"] { transition-delay: 500ms; }

/* ============================================================
   FOOTER
   ============================================================ */

.elif-footer {
  background: var(--elif-black);
  color: var(--elif-warm-gray);
  padding-block: var(--elif-space-12);
}
.elif-footer-logo {
  font-family: var(--elif-font-en);
  font-size: 1.25rem;
  letter-spacing: 0.25em;
  color: var(--elif-pale-green);
  margin-bottom: var(--elif-space-6);
}
.elif-footer-info {
  font-size: var(--elif-text-xs);
  line-height: var(--elif-lh-relaxed);
  color: var(--elif-warm-gray);
}
.elif-footer-tel {
  font-family: var(--elif-font-en);
  font-size: var(--elif-text-2xl);
  font-weight: var(--elif-weight-light);
  color: var(--elif-pale-green);
  letter-spacing: 0.05em;
  text-decoration: none;
}