/* ============================================================
   BlueFine 랜딩 페이지 — styles.css
   Clean Trust: 화이트 바탕 + 블루 팔레트 포인트
   ============================================================ */

:root {
  --mint:   #B6FFFA;
  --sky:    #98E4FF;
  --peri:   #80B3FF;
  --indigo: #687EFF;
  --indigo-deep: #3f4fd6;

  --ink:     #0d1b17;   /* 본문 텍스트 */
  --ink-2:   #4a5a53;   /* 보조 텍스트 */
  --ink-3:   #8a968f;   /* 옅은 텍스트 */
  --line:    #eceeec;   /* 구분선 */
  --bg:      #ffffff;
  --bg-soft: #f7f8f7;

  --wrap: 920px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset & base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Pretendard", "Pretendard Variable", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* 한글이 글자 단위로 쪼개지지 않고 띄어쓰기(단어) 단위로만 줄바꿈되게 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

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

/* 묶어서 같은 줄에 유지 (단어가 줄바꿈으로 갈라지지 않게) */
.nowrap { white-space: nowrap; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: clamp(22px, 6vw, 64px);
}

/* ---------- header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  padding: clamp(16px, 2.4vw, 26px) clamp(22px, 6vw, 64px);
  background: transparent;               /* 히어로 사진 위: 투명 */
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease;
}
/* 스크롤하면 흰 배경 + 검은 글씨로 전환 */
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom-color: var(--line);
}

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand .pine { display: block; }
.brand-name {
  font-weight: 800;
  font-size: clamp(16px, 1.5vw, 19px);
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* 히어로 위(미스크롤)에서는 로고·회사명 흰색으로 */
.site-header:not(.scrolled) .brand-name { color: #fff; }
.site-header:not(.scrolled) .pine path { stroke: #fff; }

/* ---------- 사이드 진행바 (오른쪽·점만) ---------- */
.progress-rail {
  position: fixed;
  top: 50%; right: clamp(16px, 2.4vw, 34px);
  transform: translateY(-50%);
  z-index: 40;
}
.progress-rail ul { list-style: none; display: flex; flex-direction: column; align-items: center; }
.progress-rail li { position: relative; }
.progress-rail li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 1px; height: 26px;
  background: #d7dbe6;
  transform: translateX(-50%);
}
.progress-rail li { padding-block: 13px; }
.dot {
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #c4cad8;
  transition: all 0.35s var(--ease);
}
.dot:hover { background: var(--peri); transform: scale(1.25); }
.dot.is-active {
  width: 12px; height: 12px;
  background: var(--indigo);
  box-shadow: 0 0 0 5px rgba(104, 126, 255, 0.16);
}

/* ---------- 공통 섹션 ---------- */
.section { padding-block: clamp(96px, 16vh, 190px); }

.sec-index {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #a0aaa4;
  margin-bottom: 22px;
}
.sec-head {
  font-size: clamp(30px, 6vw, 62px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: 26px;
}
.lead {
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.body {
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--ink-2);
  line-height: 1.75;
  max-width: 620px;
  margin-top: 18px;
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 건설 현장 사진 + 가독성용 어두운 스크림(왼쪽·하단 더 진하게) */
  background:
    linear-gradient(180deg, rgba(8, 12, 24, 0.25) 0%, rgba(8, 12, 24, 0.55) 100%),
    linear-gradient(100deg, rgba(8, 12, 24, 0.68) 0%, rgba(8, 12, 24, 0.20) 55%, rgba(8, 12, 24, 0) 100%),
    url("assets/hero.webp") center / cover no-repeat;
  padding-block: 120px 60px;
}
.hero-title {
  font-size: clamp(34px, 8.4vw, 92px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}
.accent-grad {
  background: linear-gradient(92deg, var(--peri), var(--indigo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  margin-top: clamp(18px, 2.4vw, 30px);
  font-size: clamp(15px, 1.8vw, 20px);
  color: rgba(255, 255, 255, 0.86);
  font-weight: 500;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}
.scroll-hint {
  position: absolute;
  left: 50%; bottom: 34px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.88);
}
.scroll-hint .arrow { animation: bob 1.8s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- 01 ---------- */
.s01 .beat {
  font-size: clamp(15px, 1.7vw, 20px);
  line-height: 1.75;
  max-width: 640px;
}
.s01 .beat-1 { font-weight: 700; color: var(--ink); font-size: clamp(17px, 2vw, 23px); }
.s01 .beat-2 { margin-top: 22px; color: #3a4a43; }
.s01 .beat-3 { margin-top: 14px; color: var(--ink-2); }
.s01 mark {
  background: none;
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset 0 -0.5em 0 rgba(104, 126, 255, 0.18);
  padding-bottom: 0.05em;
}

/* ---------- 02 : 문제진단 (어두운 위기 섹션) ---------- */
.s02 {
  background: #10151f;
  color: #e8ecf3;
}
.s02 .sec-index { color: #6b7688; }
.s02 .sec-head { color: #fff; }
.s02 .lead { color: #cdd4e0; margin-top: 4px; }
.s02 .body { color: #97a1b2; }

/* 통계 카운트업 블록 */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 60px);
  margin-block: clamp(38px, 6vh, 64px);
}
.stat { flex: 1 1 180px; min-width: 160px; }
.stat-num {
  display: block;
  font-size: clamp(42px, 7vw, 76px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #ff7a7a;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.stat-value { white-space: nowrap; }        /* 숫자는 절대 줄바꿈 안 됨 */
.stat-unit { margin-left: 0.04em; }
.stat-unit-block { display: block; margin-left: 0; }  /* '곳'은 항상 둘째 줄 고정 */
.stat-label {
  display: block;
  margin-top: 14px;
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.55;
  color: #8b95a7;
  max-width: 240px;
}

/* ---------- 03 : 풀 블루 블록 (ZERO OFFICE) ---------- */
.s03 {
  background: linear-gradient(150deg, var(--indigo) 0%, var(--indigo-deep) 100%);
  color: #eef1ff;
  overflow: hidden; /* 다이어그램 넘침 방지 */
}
.s03 .sec-index { color: var(--mint); }
.s03 .sec-head { color: #fff; }
.s03 .lead { color: var(--mint); margin-top: 4px; }
.s03 .body { color: #d5dbff; }

.s03-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.s03-text {
  flex: 1;
  min-width: 300px;
}

.s03-diagram-wrapper {
  flex: 1;
  width: 100%;
  max-width: 600px;
  position: relative;
}

/* 다이어그램 컨테이너 (비율 유지 및 넘침 방지) */
.diagram-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  min-height: 460px; /* 노드들이 겹치지 않기 위한 충분한 최소 높이 */
}

.diagram-node {
  position: absolute;
  width: 170px; /* 고정 너비를 주어 텍스트 길이에 따라 변동하지 않게 함 */
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  transition: transform 0.3s ease;
}

.diagram-node:hover {
  transform: translateY(-5px);
}

.diagram-node.center-node {
  top: 50%;
  right: 0%;
  transform: translateY(-50%);
  background: #fff;
  color: #3f4fd6;
  width: clamp(120px, 16vw, 150px);
  height: clamp(120px, 16vw, 150px);
  border-radius: 50%;
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 800;
  box-shadow: 0 0 50px rgba(182, 255, 250, 0.2);
  border: none;
  line-height: 1.3;
  padding: 10px;
}

.diagram-node.center-node:hover {
  transform: translateY(-50%) scale(1.05);
}

/* 좌측 노드들 위치 (SVG 선 위치인 15%, 50%, 85%에 중심을 맞춤) */
.diagram-node.blueprint { top: 15%; left: 0%; transform: translateY(-50%); }
.diagram-node.labor { top: 50%; left: 0%; transform: translateY(-50%); }
.diagram-node.order { top: 85%; left: 0%; transform: translateY(-50%); }

.diagram-node.blueprint:hover,
.diagram-node.labor:hover,
.diagram-node.order:hover {
  transform: translateY(calc(-50% - 5px));
}

.diagram-icon {
  display: block;
  font-size: 24px;
  margin-bottom: 6px;
}

.diagram-desc {
  font-size: 12px;
  color: #eef1ff;
  font-weight: 400;
  margin-top: 4px;
  opacity: 0.8;
  white-space: nowrap; /* 줄바꿈 방지로 세로 길이 고정 */
}

.center-node .diagram-desc {
  color: #ff7a7a;
  font-weight: 500;
  white-space: normal;
}

/* SVG 선 */
.diagram-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.path-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 2;
}

.path-animated {
  fill: none;
  stroke: #ff9b9b;
  stroke-width: 3;
  stroke-dasharray: 8 12;
  animation: flow-fast 0.6s linear infinite;
}

@keyframes flow-fast {
  from { stroke-dashoffset: 20; }
  to { stroke-dashoffset: 0; }
}

.pulse-ring {
  position: absolute;
  top: 50%;
  right: calc(clamp(110px, 15vw, 140px) / 2); /* center node 반경만큼 보정 */
  transform: translate(50%, -50%);
  width: clamp(110px, 15vw, 140px);
  height: clamp(110px, 15vw, 140px);
  border-radius: 50%;
  background: rgba(255, 155, 155, 0.5);
  z-index: 0;
  animation: pulse 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse {
  0% { transform: translate(50%, -50%) scale(0.9); opacity: 0.8; }
  100% { transform: translate(50%, -50%) scale(1.6); opacity: 0; }
}

/* ---------- 04 : 하는 일 ---------- */
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.chips li {
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 600;
  background: #eef2ff;
  color: var(--indigo-deep);
  padding: 9px 16px;
  border-radius: 999px;
}

/* S04 다이어그램 스타일 */
.s04-diagram-container {
  margin-top: 60px;
}

.s04-diagram-wrapper {
  width: 100%;
  padding: clamp(30px, 5vw, 50px);
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(104, 126, 255, 0.08);
  border: 1px solid rgba(104, 126, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.s04-diagram-header {
  text-align: center;
  margin-bottom: clamp(30px, 4vw, 50px);
}

.s04-diagram-badge {
  display: inline-block;
  padding: 6px 14px;
  background: #eef2ff;
  color: #3f4fd6;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.s04-diagram-title {
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 700;
  line-height: 1.5;
  color: #1a1e27;
  word-break: keep-all;
}

.s04-diagram-title strong {
  color: #3f4fd6;
}

.s04-process-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding-top: 20px;
}

/* 연결선 (배경) */
.s04-process-track {
  position: absolute;
  top: 45px; /* 노드 아이콘 중심부 */
  left: 40px;
  right: 40px;
  height: 2px;
  background: #e0e5f0;
  z-index: 1;
}

/* 연결선 (애니메이션) */
.s04-process-fill {
  position: absolute;
  top: 45px;
  left: 40px;
  height: 2px;
  width: 0%;
  background: #687EFF;
  z-index: 2;
  animation: fill-track 4s ease-in-out infinite;
}

@keyframes fill-track {
  0% { width: 0%; left: 40px; }
  50% { width: calc(100% - 80px); left: 40px; }
  100% { width: 0%; left: calc(100% - 40px); }
}

.s04-process-step {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 140px;
  text-align: center;
}

.s04-step-icon-wrap {
  width: 50px;
  height: 50px;
  background: #fff;
  border: 2px solid #e0e5f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.s04-process-step:hover .s04-step-icon-wrap {
  border-color: #687EFF;
  color: #3f4fd6;
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(104, 126, 255, 0.2);
}

.s04-step-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1e27;
  margin-bottom: 6px;
}

.s04-step-desc {
  font-size: 13px;
  color: #6b7688;
  line-height: 1.4;
  word-break: keep-all;
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  padding-block: clamp(56px, 8vh, 90px);
}
.site-footer .brand-name { font-size: 20px; }
.contact {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px 40px;
  max-width: 640px;
}
.contact dt {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 5px;
}
.contact dd { font-size: 15px; color: var(--ink); }
.contact a { color: var(--indigo-deep); }
.contact a:hover { text-decoration: underline; }
.copyright {
  margin-top: 40px;
  font-size: 12px;
  color: var(--ink-3);
}

/* ---------- reveal 애니메이션 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* 01 3박자 순차 등장 */
.s01 .beat-1.is-visible { transition-delay: 0.05s; }
.s01 .beat-2.is-visible { transition-delay: 0.25s; }
.s01 .beat-3.is-visible { transition-delay: 0.45s; }

/* ---------- 반응형 ---------- */
@media (max-width: 860px) {
  .s03-layout {
    flex-direction: column;
    align-items: flex-start;
  }
  .s03-diagram-wrapper {
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  /* S04 반응형 트릭 */
  .s04-process-container {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 20px;
  }
  .s04-process-track {
    top: 20px;
    left: 45px;
    width: 2px;
    height: 100%;
  }
  .s04-process-fill {
    top: 20px;
    left: 45px;
    width: 2px;
    height: 0%;
    animation: fill-track-mobile 4s ease-in-out infinite;
  }
  .s04-process-step {
    flex-direction: row;
    text-align: left;
    width: 100%;
    margin-bottom: 30px;
  }
  .s04-step-icon-wrap {
    margin-bottom: 0;
    margin-right: 20px;
    flex-shrink: 0;
  }
  .s04-step-text {
    flex: 1;
  }
  
  @keyframes fill-track-mobile {
    0% { height: 0%; top: 20px; }
    50% { height: calc(100% - 40px); top: 20px; }
    100% { height: 0%; top: calc(100% - 20px); }
  }
}

@media (max-width: 720px) {
  .progress-rail { display: none; }
  .section { padding-block: clamp(72px, 12vh, 110px); }
}

/* ---------- 모션 최소화 존중 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-hint .arrow { animation: none; }
}