/* 홈: 슬라이드 히어로 · 4가지 특징 · 주요품목 카드 · 네트워크 지도 · 지속가능 띠 · 뉴스 한 줄
 * 시안 구성을 그대로 따른다. 지도·카드는 하위 페이지에서도 쓴다.
 */

/* ── 히어로 슬라이드 ─────────────────────────────────── */

.hero {
  position: relative;
  height: clamp(520px, 72vh, 640px);
  overflow: hidden;
  color: var(--white);
  background: var(--navy-deep);
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
  isolation: isolate;
}

.slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.9s ease; }

.slide-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 50%;
}

.slide.is-active .slide-photo { animation: hero-zoom 9s ease-out both; }

@keyframes hero-zoom {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

/* 글씨가 읽히도록 왼쪽을 남색으로 어둡게 한다(시안과 같은 톤). */
.slide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(7 24 60 / 0.9) 0%, rgb(7 24 60 / 0.72) 32%, rgb(7 24 60 / 0.25) 62%, rgb(7 24 60 / 0.05) 100%),
    linear-gradient(0deg, rgb(7 24 60 / 0.45) 0%, rgb(7 24 60 / 0) 40%);
}

.slide-body { padding-top: 12px; padding-bottom: 40px; }

.slide-eyebrow {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--f-latin);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.42em;
  color: rgb(255 255 255 / 0.92);
}

.slide-title {
  display: flex;
  flex-direction: column;
  margin-top: 22px;
  font-family: var(--f-head);
  font-size: 50px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.015em;
}

.slide-text {
  display: flex;
  flex-direction: column;
  margin: 24px 0 34px;
  font-size: 17px;
  line-height: 1.75;
  color: rgb(255 255 255 / 0.9);
}

.hero-script {
  position: absolute;
  top: 44px;
  right: max(40px, calc((100vw - var(--wrap)) / 2 - 20px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--f-script);
  font-size: 38px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--white);
  transform: rotate(-5deg);
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.25);
  pointer-events: none;
}

.hero-script span:nth-child(2) { padding-left: 14px; }
.hero-script span:nth-child(3) { padding-left: 28px; }
.hero-script span:nth-child(4) { padding-left: 42px; }
.hero-script-leaf { position: absolute; top: -6px; right: -26px; color: #b8e27a; }

.hero-words {
  position: absolute;
  right: max(40px, calc((100vw - var(--wrap)) / 2 - 20px));
  bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--f-latin);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.45em;
  color: rgb(255 255 255 / 0.85);
  pointer-events: none;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  border: 0;
  background: transparent;
  color: rgb(255 255 255 / 0.9);
  cursor: pointer;
}

.hero-arrow:hover { color: var(--white); }
.hero-arrow.prev { left: 12px; }
.hero-arrow.next { right: 12px; }

.hero-dots-wrap { position: absolute; left: 0; right: 0; bottom: 40px; z-index: 3; }
.hero-dots { display: flex; gap: 10px; }

.hero-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1.5px solid var(--white);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.hero-dots button[aria-current='true'] { background: var(--white); }

/* ── 4가지 특징 ─────────────────────────────────────── */

.features { background: var(--paper); border-bottom: 1px solid var(--line); }

.features-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; margin-bottom: 0; list-style: none; }

.features-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 34px 16px 30px;
  text-align: center;
}

.features-list li + li { border-left: 1px solid var(--line); }
.features-list .icon { color: var(--blue); }
.features-list strong { margin-top: 8px; font-family: var(--f-latin); font-size: 14px; font-weight: 700; letter-spacing: 0.03em; color: var(--navy); }
.features-list span { font-size: 13px; color: var(--muted); }

/* ── 주요품목 카드 ─────────────────────────────────── */

.home-products { padding-top: 72px; padding-bottom: 80px; }

.product-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }

.product-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  color: var(--white);
  text-decoration: none;
  box-shadow: 0 10px 24px rgb(11 31 75 / 0.14);
  isolation: isolate;
}

.product-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.5s ease; }
.product-card:hover img { transform: scale(1.05); }

.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgb(7 20 45 / 0.82) 0%, rgb(7 20 45 / 0.2) 48%, rgb(7 20 45 / 0) 70%);
}

.product-card-body { position: absolute; left: 20px; bottom: 18px; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.product-card-body strong { font-family: var(--f-head); font-size: 21px; font-weight: 700; }
.product-card-body span { font-family: var(--f-latin); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; opacity: 0.9; }
.product-card-arrow { position: absolute; right: 18px; bottom: 20px; z-index: 1; }

/* ── 네트워크 ───────────────────────────────────────── */

.network { padding: 80px 0; background: linear-gradient(180deg, var(--white) 0%, var(--paper) 100%); }

.network-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.5fr) minmax(0, 0.55fr);
  gap: 32px;
  align-items: center;
}

.network-text .section-head { margin-bottom: 20px; }
.network-body { display: flex; flex-direction: column; margin-bottom: 32px; color: var(--muted); font-size: 15px; line-height: 1.8; }

.route-map { position: relative; margin: 0; }
.route-map img { width: 100%; height: auto; }
.route-map-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.route-map .arc {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: arc-draw 2.2s ease-out 0.4s forwards;
}

.route-map .arc + .arc { animation-delay: 0.9s; }

@keyframes arc-draw { to { stroke-dashoffset: 0; } }

.pin circle { fill: var(--navy); }
.pin-origin circle { fill: var(--red); }
.pin .pulse { fill: currentColor; opacity: 0.18; transform-box: fill-box; transform-origin: center; animation: pin-pulse 2.4s ease-out infinite; }
.pin-origin { color: var(--red); }
.pin-korea { color: var(--navy); }

@keyframes pin-pulse {
  0% { transform: scale(0.5); opacity: 0.35; }
  100% { transform: scale(1.8); opacity: 0; }
}

.map-label { font-family: var(--f-latin); font-size: 17px; font-weight: 700; letter-spacing: 0.12em; fill: var(--navy); }
.map-sub { font-size: 14px; fill: var(--muted); }

.stats { display: grid; gap: 30px; margin: 0; }
.stats dt { display: flex; align-items: baseline; gap: 6px; }
.stat-value { font-family: var(--f-latin); font-size: 46px; font-weight: 700; line-height: 1; color: var(--navy); }
.stat-unit { font-family: var(--f-latin); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--blue); }
.stats dd { display: flex; flex-direction: column; margin: 8px 0 0; }
.stat-code { font-family: var(--f-latin); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--navy); }
.stat-label { font-size: 13px; color: var(--muted); }

/* ── 지속가능 띠 ─────────────────────────────────────── */

.sustain {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 320px;
  padding: 56px 0;
  color: var(--white);
  background: #1b3a26;
  isolation: isolate;
}

.sustain-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 20% 50%; }

.sustain::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(270deg, rgb(10 30 45 / 0.88) 0%, rgb(10 30 45 / 0.62) 40%, rgb(10 30 45 / 0) 72%);
}

.sustain-body { display: flex; flex-direction: column; align-items: flex-start; padding-left: 50%; }
.sustain-body h2 { font-size: 32px; }
.sustain-body p:not(.eyebrow) { display: flex; flex-direction: column; margin: 16px 0 28px; color: rgb(255 255 255 / 0.9); }

/* ── 뉴스 한 줄 ─────────────────────────────────────── */

.news-strip { border-top: 1px solid var(--line); background: var(--white); }
.news-row { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.news-label { padding-right: 28px; border-right: 1px solid var(--line); font-family: var(--f-latin); font-size: 17px; font-weight: 800; letter-spacing: 0.08em; color: var(--navy); }
.news-title { flex: 1; min-width: 0; overflow: hidden; color: var(--ink); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.news-title:hover { color: var(--blue); text-decoration: underline; }
.news-title.is-empty { color: var(--muted); }
.news-row time { flex-shrink: 0; font-family: var(--f-latin); font-size: 13px; color: #8a93a8; }
.news-more { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: 24px; color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.news-more:hover { color: var(--blue); }

/* ── 움직임 줄이기 ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .slide, .slide.is-active { transition: none; }
  .slide.is-active .slide-photo { animation: none; }
  .product-card img { transition: none; }
  .route-map .arc { animation: none; stroke-dashoffset: 0; }
  .pin .pulse { animation: none; }
}

/* ── 반응형 ─────────────────────────────────────────── */

@media (max-width: 1180px) {
  .network-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .stats { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .hero-script { display: none; }
  .slide-title { font-size: 40px; }
  .features-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features-list li:nth-child(3) { border-left: 0; }
  .features-list li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .product-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .network-grid { grid-template-columns: 1fr; }
  .sustain-body { padding-left: var(--gutter); }
  .sustain::before { background: linear-gradient(0deg, rgb(10 30 45 / 0.9) 0%, rgb(10 30 45 / 0.55) 100%); }
}

@media (max-width: 640px) {
  .hero { height: 560px; }
  .slide::before { background: linear-gradient(0deg, rgb(7 24 60 / 0.88) 0%, rgb(7 24 60 / 0.62) 55%, rgb(7 24 60 / 0.35) 100%); }
  .slide-eyebrow { font-size: 11px; letter-spacing: 0.3em; }
  .slide-title { font-size: 30px; margin-top: 16px; }
  .slide-text { font-size: 15px; margin: 16px 0 26px; }
  .hero-words { display: none; }
  .hero-arrow { display: none; }
  .features-list li { padding: 24px 10px; }
  .features-list strong { font-size: 12px; }
  .product-cards { gap: 10px; }
  .product-card-body { left: 14px; bottom: 12px; }
  .product-card-body strong { font-size: 17px; }
  .product-card-arrow { display: none; }
  .stats { grid-template-columns: 1fr; gap: 20px; }
  .sustain-body h2 { font-size: 24px; }
  .news-row { flex-wrap: wrap; gap: 8px 16px; padding-top: 16px; padding-bottom: 16px; }
  .news-label { border-right: 0; padding-right: 0; }
  .news-title { flex-basis: 100%; order: 3; white-space: normal; }
  .news-more { margin-left: auto; }
}