:root {
  --bg:#0b0d10;
  --fg:#e9eef3;
  --muted:#9fb0c2;
  --brand:#7fd1ae;
  --maxw:1140px;
  --pad:clamp(16px,3vw,28px);
  --vh:100svh;
}

/* ===== Reset & Base ===== */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.65 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ===== Screen Reader Only ===== */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== NAV ===== */
.nav {
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  background:color-mix(in oklab, #000 45%, transparent);
  border-bottom:1px solid color-mix(in oklab, #fff 10%, transparent);
}
.nav-inner {
  max-width:var(--maxw);
  margin:auto;
  padding:10px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* ===== LOGO ===== */
.logo {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--fg);
}
.logo img {
  display:block;
  height:24px; /* 조정 가능 (24~32px) */
  width:auto;
  filter:brightness(2.1) contrast(1.25)
          drop-shadow(0 2px 8px rgba(0,0,0,.5));
  transition:filter .3s ease;
}
.nav:hover .logo img {
  filter:brightness(2.3) contrast(1.35)
          drop-shadow(0 3px 10px rgba(0,0,0,.6));
}

/* ===== Menu ===== */
.menu {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.menu a {
  color:var(--fg);
  text-decoration:none;
  padding:8px 12px;
  border-radius:10px;
  transition:background .2s ease, color .2s ease;
}
.menu a:hover { background:#172029; }
.menu a.active {
  background:var(--brand);
  color:#071813;
  font-weight:700;
}

/* ===== Sections ===== */
section {
  min-height:calc(var(--vh) - 56px);
  display:grid;
  place-items:center;
  padding:clamp(32px,7vw,96px) var(--pad);
  position:relative;
  isolation:isolate;
}
.container {
  max-width:var(--maxw);
  width:100%;
  position:relative;
  z-index:1;
}

/* ===== Typography ===== */
.kicker {
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--brand);
  font-weight:800;
  font-size:.95rem;
  margin-bottom:.6em;
}
h1,h2 { margin:0 0 .45em; }
h1 {
  font-size:clamp(30px,6.5vw,66px);
  line-height:1.08;
  text-shadow:0 10px 28px rgba(0,0,0,.45);
}
h2 {
  font-size:clamp(22px,4.2vw,42px);
  line-height:1.15;
  text-shadow:0 8px 22px rgba(0,0,0,.35);
}
p {
  margin:.6em 0;
  color:var(--muted);
}

/* ===== Parallax Background ===== */
.parallax {
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  transition:background-position .6s ease-out;
}
.no-fixed .parallax { background-attachment:scroll; }

/* ===== Overlay ===== */
.overlay {
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  backdrop-filter:blur(var(--blur, 8px));
  -webkit-backdrop-filter:blur(var(--blur, 8px));
  background:rgba(0,0,0,var(--dim, .32));
  transition:backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease, background .3s ease;
}

/* ===== Section-specific Tone ===== */
#home      { --blur: 3px;  --dim:.15; }
#solutions { --blur: 3px;  --dim:.15; }
#materials { --blur: 6px;  --dim:.15; }
#about     { --blur: 1px;  --dim:.15; }
#contact   { --blur: 6px;  --dim:.15; }

/* ===== Hero Section ===== */
.hero {
  min-height:calc(100svh - 56px); /* 화면 가득 채우기 */
  text-align:center;
  display:grid;
  align-items:center;
  justify-items:center;
  position:relative;
}
.hero .container { position:relative; z-index:1; }
.hero .ghost-cta {
  margin-top:16px;
  color:var(--muted);
  font-size:.95rem;
}

/* ===== Grid Cards ===== */
.grid {
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  margin-top:22px;
}
.card {
  background:#0f1318;
  border:1px solid #1a222b;
  border-radius:14px;
  padding:clamp(18px,2.6vw,28px);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .3s ease, box-shadow .3s ease;
  text-decoration:none;
  color:inherit;
  display:block;
}
.card:hover {
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(0,0,0,.35);
}
.card h3 { margin:.2em 0 .4em; font-size:1.2rem; }
.card:focus-visible {
  outline:2px solid var(--brand);
  outline-offset:4px;
}

/* ===== CTA & Contact Form ===== */
.cta-row {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-start;
  margin-top:14px;
}
.cta-btn {
  background:var(--brand);
  color:#071813;
  font-weight:700;
  padding:8px 14px;
  border:none;
  border-radius:8px;
  font-size:.9rem;
  cursor:pointer;
  text-decoration:none;
  transition:all .2s ease;
}
.cta-btn.email {
  background:#0d1319;
  border:1px solid #33404d;
  color:var(--fg);
}
.cta-btn:hover { filter:brightness(1.1); }

.form-compact {
  display:grid;
  gap:8px;
  margin-top:14px;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform:translateY(-10px);
  transition:max-height .5s ease, padding .3s ease, opacity .4s ease, transform .4s ease;
}
.form-compact.open {
  max-height:950px;
  padding-top:12px;
  opacity:1;
  transform:translateY(0);
}
.form-compact input,
.form-compact select,
.form-compact textarea {
  padding:8px 10px;
  font-size:.9rem;
  border-radius:6px;
  border:1px solid #26303a;
  background:#0d1116;
  color:var(--fg);
}
.form-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:8px;
}
.submit-btn {
  background:var(--brand);
  color:#071813;
  font-weight:700;
  padding:10px 16px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:filter .2s ease;
}
.submit-btn:hover { filter:brightness(1.1); }

/* ===== Reveal Animation ===== */
.reveal {
  opacity:0;
  transform:translateY(10px);
  filter:saturate(.98);
  will-change:opacity, transform, filter;
  transition:opacity .5s ease-out, transform .5s ease-out, filter .5s ease-out;
}
.reveal.in {
  opacity:1;
  transform:none;
  filter:none;
}
@media (prefers-reduced-motion:reduce) {
  .reveal {
    transition:none;
    transform:none;
    opacity:1;
    filter:none;
  }
}

/* ===== Footer ===== */
footer {
  color:#7d8b9a;
  text-align:center;
  padding:28px var(--pad);
  font-size:.9rem;
}

/* ===== Responsive ===== */
@media (max-width:700px) {
  .cta-row { justify-content:center; }
  .cta-btn { width:100%; text-align:center; }
  .logo img { height:24px; }
}

/* ===== Section Scroll Offset ===== */
section[id] { scroll-margin-top:62px; }

/* ===== Subtle premium glow on hover (logo + cards) ===== */

/* 1) Logo glow */
.logo { position: relative; }
.logo img {
  transition: filter .25s ease, transform .25s ease;
}
.logo:hover img,
.logo:focus-visible img {
  /* 기존 대비/밝기 증강 + 브랜드 컬러 드롭섀도우 레이어 */
  filter:
    brightness(2.5) contrast(1.4)
    drop-shadow(0 3px 10px rgba(0,0,0,.55))
    drop-shadow(0 0 18px rgba(127,209,174,1));
  transform: translateY(-2px);
}

/* 2) Card glow */
.card { position: relative; }
.card::after {
  content:"";
  position:absolute; inset:-1px; border-radius:14px;
  pointer-events:none;
  box-shadow:
    0 0 0 0 rgba(127,209,174,0),
    0 0 0 0 rgba(127,209,174,0);
  transition: box-shadow .25s ease;
}
.card:hover::after,
.card:focus-visible::after {
  /* 아웃라인 + 은은한 외광 */
  box-shadow:
    0 0 0 3px rgba(127,209,174,.45),
    0 10px 28px rgba(127,209,174,.12);
}

/* 카드 자체의 기존 hover 움직임과 잘 섞이도록 살짝만 상승 */
.card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover {
  transform: translateY(-3px);
}

/* 접근성: 모션 최소화 환경에서 이동 효과 제거 */
@media (prefers-reduced-motion: reduce) {
  .logo img,
  .card { transition: none; }
}
/* ===== Mobile nav fix ===== */
@media (max-width: 700px) {
  .nav-inner { gap: 8px; padding: 8px var(--pad); }
  .logo img { height: 20px; }                 /* 로고 살짝 더 작게 */

  .menu {
    flex-wrap: nowrap;                         /* 줄바꿈 금지 */
    overflow-x: auto;                          /* 넘치면 가로 스크롤 */
    -webkit-overflow-scrolling: touch;         /* iOS 부드러운 스크롤 */
    scrollbar-width: none;                     /* Firefox 스크롤바 숨김 */
  }
  .menu::-webkit-scrollbar { display: none; }  /* WebKit 스크롤바 숨김 */

  .menu a {
    flex: 0 0 auto;            /* 한 줄 유지 */
    padding: 6px 10px;         /* pill 사이즈 소폭 축소 */
    font-size: 0.95rem;
    border-radius: 9px;
  }
}
.hero {
  min-height: calc(100dvh - 56px);   /* 우선권: 동적 뷰포트 높이 */
}
@supports not (height: 100dvh) {
  .hero { min-height: calc(100svh - 56px); }   /* 구형 브라우저용 */
}
section[id] { scroll-margin-top: 70px; }   /* 기존 62px → 70px */
@media (min-width: 701px) {
  section[id] { scroll-margin-top: 62px; } /* 데스크톱은 기존값 유지 */
}
/* ===== Mobile Header 2-Line Layout ===== */
@media (max-width: 700px) {
  .nav-inner {
    flex-direction: column;       /* 세로로 배치 */
    align-items: center;
    gap: 6px;                     /* 로고와 메뉴 사이 여백 */
    padding: 10px var(--pad);
  }

  .logo {
    justify-content: center;      /* 로고 중앙 정렬 */
  }

  .logo img {
    height: 28px;                 /* 로고 크기 살짝 키움 */
  }

  .menu {
    display: flex;
    justify-content: center;      /* 중앙 정렬 */
    gap: 14px;                    /* 메뉴 간 간격 */
    flex-wrap: nowrap;            /* 줄바꿈 없이 한 줄 유지 */
    overflow-x: auto;             /* 혹시 넘치면 스크롤 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .menu::-webkit-scrollbar { display: none; }

  .menu a {
    font-size: 0.92rem;
    padding: 6px 10px;
    border-radius: 8px;
    flex: 0 0 auto;               /* 줄바꿈 방지 */
  }
}
/* ===== Mobile: translucent -> solid header on scroll ===== */
@media (max-width: 700px) {
  .nav {
    /* 시작은 살짝 투명한 톤 */
    background: color-mix(in oklab, #000 28%, transparent);
    border-bottom: 1px solid color-mix(in oklab, #fff 6%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  /* 스크롤 후: 더 어둡고 또렷하게 */
  .nav.nav--solid {
    background: color-mix(in oklab, #000 72%, transparent); /* ≈ #0b0d10 with alpha */
    border-bottom: 1px solid color-mix(in oklab, #fff 14%, transparent);
    box-shadow: 0 6px 20px rgba(0,0,0,.28);
  }
}
/* ===== Mobile header layout ===== */
@media (max-width: 700px){
  .nav-inner{
    /* 로고 위, 메뉴 아래로 세로배치 */
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* 상단 안전영역 여백(iOS) */
    padding-top: calc(10px + env(safe-area-inset-top));
  }

  .logo img{
    height: 22px; /* 로고 살짝 작게 */
  }

  .menu{
    width: 100%;
    display: flex;
    justify-content: center;   /* 중앙 정렬 */
    gap: 8px;
    flex-wrap: wrap;           /* 줄바꿈 허용(좁을 때도 보기 좋게) */
    padding: 0 12px;           /* 좌우 여백 */
  }

  .menu a{
    padding: 8px 12px;         /* pill 사이즈 균일 */
  }
}/* === Mobile: keep menu on one line + swipe horizontally === */
@media (max-width: 700px){
  .nav-inner{
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-left:  max(var(--pad), 12px + env(safe-area-inset-left));
    padding-right: max(var(--pad), 12px + env(safe-area-inset-right));
    width: 100%;
  }

  .menu{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;                 /* 한 줄 유지 */
    justify-content: flex-start;       /* 스크롤 시작점 정렬 */
    gap: 12px;
    padding: 0 12px;
    overflow-x: auto;                  /* 가로 스크롤 허용 */
    -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
    scrollbar-width: none;             /* Firefox 스크롤바 숨김 */
  }
  .menu::-webkit-scrollbar{ display: none; } /* 크롬/사파리 스크롤바 숨김 */

  .menu a{
    white-space: nowrap;               /* 줄바꿈 방지 → pill이 안깨짐 */
    flex: 0 0 auto;                    /* 축소 금지 */
  }

  .logo img{ height: 22px; }
}