/* ==========================================================================
   eco-lab.css — 생태계 섹션 리디자인 샘플 전용

   ECO-REDESIGN-PLAN.md §3 / §4-1
   **main.css 를 건드리지 않습니다.** 샘플이 확정되면 그때 병합합니다.
   그래서 여기의 모든 규칙은 .eco-lab 또는 .eco-s* 아래에만 있습니다 —
   현행 #ecosystem 섹션에는 한 글자도 닿지 않습니다.

   목차
     0. 애니메이션되는 커스텀 속성
     1. 공통 — 섹션 셸 · 카드 · 포맷 A/B/C
     2. 배경 (Dot Grid / Grid Scan / Topography / Grain)
     3. Sample 01  콘솔 / 데이터 룸
     4. Sample 02  소프트 머티리얼
     5. Sample 03  타이포 주도 (Flowing Menu)
     6. Sample 04  혼합 비대칭 (벤토)
     7. Sample 05  최소 개입
     8. 반응형 · reduced motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 애니메이션되는 커스텀 속성
   main.css §0 과 같은 규칙 — JS 가 흘려보내는 값은 등록해 둡니다.
   ★ --sx/--sy/--sa 는 카드에 쓰고 ::before 가 읽으므로 inherits: true 여야 합니다
     (v4.3 의 --sb-on 에서 겪은 것과 같은 함정)
   -------------------------------------------------------------------------- */
@property --sx { syntax: "<length>"; inherits: true; initial-value: 50%; }  /* 스포트라이트 x */
@property --sy { syntax: "<length>"; inherits: true; initial-value: 50%; }  /* 스포트라이트 y */
@property --sa { syntax: "<number>"; inherits: true; initial-value: 0; }    /* 스포트라이트 밝기 */

/* --------------------------------------------------------------------------
   1. 공통
   -------------------------------------------------------------------------- */
.eco-s {
  position: relative;
  padding: clamp(70px, 9vw, 120px) 0;
  isolation: isolate;
  overflow: hidden;
}
.eco-s__head { margin-bottom: clamp(30px, 4vw, 52px); }
.eco-s__lead { margin-top: 14px; font-size: clamp(15px, 1.6vw, 17px); color: var(--ink-600); }

/* ---- 카드 ----
   위계 대비를 21 / 13.5 / 12px 로 벌립니다 (PLAN §3-2).
   현행 22 / 15 / 14.5 는 0.5px 차이라 한 덩어리로 보입니다. */
.ecard {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-1);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .35s var(--e-out), box-shadow .35s var(--e-out), transform .35s var(--e-out);
}

/* Spotlight — 포인터를 따라가는 광원. JS 는 --sx/--sy/--sa 만 씁니다 */
.ecard::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: var(--sa, 0);
  background: radial-gradient(240px circle at var(--sx, 50%) var(--sy, 50%),
    color-mix(in srgb, var(--glow, var(--node)) 16%, transparent), transparent 62%);
  transition: opacity .3s var(--e-out);
}
.ecard > * { position: relative; z-index: 1; }

/* Border Glow — 광원 쪽 테두리만 밝아집니다 (CSS 만) */
.ecard::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  opacity: var(--sa, 0);
  background: radial-gradient(180px circle at var(--sx, 50%) var(--sy, 50%),
    color-mix(in srgb, var(--glow, var(--node)) 60%, transparent), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  transition: opacity .3s var(--e-out);
}

/* 액센트 1색 모드 — --node 3색 로테이션을 끕니다 (PLAN §3-3) */
.ecard.is-mono { --glow: var(--blue-500); }
.ecard:not(.is-mono) { --glow: var(--node); }

/* ---- 메타 라인 ----
   --node 를 쓰는 자리는 카드당 여기 하나뿐입니다 */
.ecard__meta {
  display: flex; align-items: center; gap: 7px;
  font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, monospace;
  font-size: 11px; font-weight: 600; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-400);
}
.ecard__meta b { color: var(--node); font-weight: 700; }
.ecard.is-mono .ecard__meta b { color: var(--blue-500); }
.ecard__dash { color: var(--line); }

.ecard__title {
  font-size: clamp(18px, 1.9vw, 21px); font-weight: 700; line-height: 1.25;
  letter-spacing: -.01em; color: var(--heading);
  margin-top: 14px;
}
.ecard__desc {
  font-size: 13.5px; line-height: 1.7; color: var(--ink-500);
  margin-top: 8px; max-width: 30ch;
}

/* 아이콘은 배지가 아니라 워터마크 */
.ecard__mark {
  position: absolute; top: 18px; right: 18px; z-index: 0;
  width: 46px; height: 46px;
  color: var(--node);
  opacity: .07;
  pointer-events: none;
}
.ecard.is-mono .ecard__mark { color: var(--navy-900); }
.ecard__mark svg { width: 100%; height: 100%; stroke-width: 1.2; }

/* ---- 포맷 A : 스켈레톤 프리뷰 + 칩 ---- */
.ecard__preview {
  margin-top: 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--blue-25), #fff);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  overflow: hidden;
  /* 스켈레톤은 세로형 폰 UI 입니다 — 위쪽만 잘라 보여 주면
     "실제 화면의 일부" 라는 인상이 나면서 높이도 통제됩니다 */
  height: var(--preview-h, 132px);
  padding: 10px 12px 0;
}
.ecard__screen {
  height: 100%;
  border-radius: 10px 10px 0 0;
  background: #fff;
  box-shadow: 0 -1px 0 var(--line-soft) inset, var(--sh-1);
  overflow: hidden;
}
.ecard__screen .sk { height: 100%; padding: 12px 10px 0; }

.ecard__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: auto; padding-top: 16px;   /* margin-top:auto → 카드 높이가 달라도 하단선이 맞습니다 */
}
.ecard__chip {
  font-size: 12px; font-weight: 600; line-height: 1.35;
  padding: 5px 9px; border-radius: 6px;
  color: var(--ink-700);
  background: color-mix(in srgb, var(--glow) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--glow) 16%, transparent);
  transition: background .3s, border-color .3s;
}
.ecard:hover .ecard__chip { background: color-mix(in srgb, var(--glow) 11%, transparent); }

/* ---- 포맷 B : 사양표 ---- */
.ecard__spec { margin-top: 16px; }
.ecard__row {
  display: grid; grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px; align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.ecard__row:last-child { border-bottom: 0; }
.ecard__row dt { font-size: 12.5px; font-weight: 600; color: var(--ink-400); letter-spacing: -.01em; }
.ecard__row dd { font-size: 14px; font-weight: 600; color: var(--ink-900); letter-spacing: -.01em; }

/* ---- 포맷 C : 인라인 한 줄 ---- */
.ecard__inline {
  margin-top: 10px;
  font-size: 13.5px; line-height: 1.7; color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   1-2. 실제 적용 (index.php 의 #ecosystem)

   샘플이 아니라 본 페이지에 들어간 그리드입니다.
   **이전 .eco-panel 의 비율·패딩·radius 를 그대로 물려받습니다.**

     .eco-panel  469 × 320 → 비율 1.4656 · padding 34px · radius 24px

   6장을 2열 × 3행으로 놓으면 카드 폭이 562px 이 되어 원래 469px 과 가장 가깝습니다
   (3열이면 368px 로 오히려 더 멉니다). aspect-ratio 로 비율을 못 박아 두면
   화면 폭이 변해도 카드 모양이 유지됩니다.
   -------------------------------------------------------------------------- */
.eco-live {
  position: relative;
  padding: clamp(70px, 9vw, 120px) 0 clamp(80px, 10vw, 130px);
  isolation: isolate;
  overflow: hidden;
}
.eco-live .sect-head { margin-bottom: clamp(30px, 4vw, 52px); }

.eco-live__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 22px);
}

/* 이전 패널과 같은 비율 · 패딩 · 모서리 */
.eco-live .ecard {
  aspect-ratio: 469 / 320;
  padding: clamp(22px, 2.4vw, 34px);
  border-radius: 24px;
}
/* 카드가 이전 패널보다 큰 만큼 프리뷰도 함께 키웁니다 */
.eco-live .ecard { --preview-h: 150px; }

/* --------------------------------------------------------------------------
   2. 배경
   -------------------------------------------------------------------------- */
.eco-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Dot Grid */
.eco-bg--dots {
  background-image: radial-gradient(circle at 1px 1px, rgba(43,127,224,.16) 1px, transparent 0);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 85%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 85%);
}

/* Grid Scan — 격자 + 아주 느린 주사선 */
.eco-bg--scan {
  background-image:
    linear-gradient(to right, rgba(43,127,224,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(43,127,224,.055) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(110% 85% at 50% 10%, #000 30%, transparent 82%);
  -webkit-mask-image: radial-gradient(110% 85% at 50% 10%, #000 30%, transparent 82%);
}
.eco-bg--scan::after {
  content: ""; position: absolute; left: 0; right: 0; height: 30%;
  background: linear-gradient(180deg, transparent, rgba(43,127,224,.07), transparent);
  animation: ecoScan 9s linear infinite;
}
@keyframes ecoScan { from { top: -30%; } to { top: 100%; } }

/* Topography — 등고선 */
.eco-bg--topo {
  background-image: repeating-radial-gradient(circle at 30% 40%,
    transparent 0 26px, rgba(43,127,224,.07) 26px 27px);
  mask-image: linear-gradient(180deg, #000 20%, transparent 92%);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 92%);
}

/* Grain — 매끈함을 깨는 노이즈 한 겹 */
.eco-bg--grain {
  background-image:
    radial-gradient(60% 50% at 15% 15%, rgba(140,198,63,.10), transparent 60%),
    radial-gradient(55% 45% at 85% 30%, rgba(43,127,224,.12), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size: auto, auto, 140px 140px;
  opacity: .9;
}

/* --------------------------------------------------------------------------
   3. Sample 01 — 콘솔 / 데이터 룸  (비대칭 벤토 + 포맷 A + 액센트 1색)
   -------------------------------------------------------------------------- */
.eco-s01 { background: linear-gradient(180deg, #fff 0%, var(--blue-25) 100%); }

.eco-bento {
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(210px, auto);
}
.ecard[data-span="2x2"] { grid-column: span 2; grid-row: span 2; }
.ecard[data-span="2x1"] { grid-column: span 2; }

/* 큰 카드는 프리뷰도 크게 — 같은 포맷이라도 밀도가 달라집니다 */
.ecard[data-span="2x2"] { --preview-h: 250px; }
.ecard[data-span="2x2"] .ecard__title { font-size: clamp(21px, 2.3vw, 26px); }
.ecard[data-span="2x1"] { --preview-h: 118px; }

/* --------------------------------------------------------------------------
   4. Sample 02 — 소프트 머티리얼  (3×2 균등 + 포맷 B + 글래스 + 그레인)
   -------------------------------------------------------------------------- */
.eco-s02 { background: linear-gradient(180deg, var(--blue-25), #EEF4FB); }

.eco-grid3 {
  display: grid; gap: clamp(14px, 1.8vw, 20px);
  grid-template-columns: repeat(3, 1fr);
  align-items: start;   /* 높이는 콘텐츠에 따라 자연 가변 */
}
/* 글래스 표면 — SVG displacement 대신 backdrop-filter (런타임 0) */
.eco-s02 .ecard {
  background: rgba(255,255,255,.66);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-color: rgba(255,255,255,.85);
  box-shadow: 0 10px 30px rgba(15,42,92,.07), inset 0 1px 0 rgba(255,255,255,.9);
}
/* 채도 -15% — 기존 3색은 유지하되 톤만 낮춥니다 */
.eco-s02 .ecard { --node-soft: color-mix(in srgb, var(--node) 85%, var(--ink-400)); }
.eco-s02 .ecard__meta b { color: var(--node-soft); }
.eco-s02 .ecard__mark { color: var(--node-soft); opacity: .09; }

/* --------------------------------------------------------------------------
   5. Sample 03 — 타이포 주도 (Flowing Menu)
   -------------------------------------------------------------------------- */
.eco-s03 { background: var(--navy-900); color: #fff; }
.eco-s03 .sect-head__title { color: #fff; }
.eco-s03 .sect-head__eyebrow { color: var(--blue-300); }
.eco-s03 .eco-s__lead { color: var(--blue-200); }

.eco-flow { border-top: 1px solid rgba(255,255,255,.14); }
.eco-flow__row {
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.14);
  overflow: hidden;
}
.eco-flow__link {
  position: relative; z-index: 1;
  display: flex; align-items: baseline; gap: clamp(14px, 2vw, 28px);
  width: 100%; padding: clamp(20px, 2.6vw, 34px) 4px;
  text-align: left; color: #fff;
  transition: color .4s var(--e-out);
}
.eco-flow__no {
  flex: none;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px; font-weight: 600; letter-spacing: .14em;
  color: var(--blue-300);
}
.eco-flow__title {
  font-size: clamp(28px, 5vw, 56px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
}
.eco-flow__sub {
  margin-left: auto; flex: none;
  font-size: 13px; color: rgba(255,255,255,.55);
  max-width: 40ch; text-align: right;
  transition: color .4s var(--e-out);
}

/* 마퀴 패널 — hover / focus 시 아래에서 밀려 올라옵니다 */
.eco-flow__marquee {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center;
  background: var(--node);
  transform: translateY(101%);
  transition: transform .5s var(--e-mask);
  pointer-events: none;
}
/* 세 경로가 같은 상태로 들어갑니다 — 포인터(hover) · 키보드(focus-visible) ·
   터치/클릭(.is-open, eco-lab.js 가 토글). PLAN §6 의 "대체 경로 필수". */
.eco-flow__row:hover .eco-flow__marquee,
.eco-flow__row.is-open .eco-flow__marquee,
.eco-flow__link:focus-visible ~ .eco-flow__marquee { transform: translateY(0); }

.eco-flow__row:hover .eco-flow__link,
.eco-flow__row.is-open .eco-flow__link,
.eco-flow__link:focus-visible { color: var(--navy-900); }

.eco-flow__row:hover .eco-flow__no,
.eco-flow__row.is-open .eco-flow__no,
.eco-flow__link:focus-visible .eco-flow__no { color: rgba(15,42,92,.6); }

.eco-flow__row:hover .eco-flow__sub,
.eco-flow__row.is-open .eco-flow__sub,
.eco-flow__link:focus-visible .eco-flow__sub { color: rgba(15,42,92,.7); }

.eco-flow__track {
  display: flex; gap: 34px; align-items: center;
  white-space: nowrap;
  animation: ecoMarquee 18s linear infinite;
  animation-play-state: paused;
}
.eco-flow__row:hover .eco-flow__track,
.eco-flow__row.is-open .eco-flow__track { animation-play-state: running; }
.eco-flow__track span {
  font-size: clamp(22px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.02em;
  color: rgba(15,42,92,.82);
}
.eco-flow__track i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(15,42,92,.4); flex: none;
}
@keyframes ecoMarquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   6. Sample 04 — 혼합 비대칭 (벤토 + 포맷 A/B/C 혼용)
   -------------------------------------------------------------------------- */
.eco-s04 { background: linear-gradient(180deg, var(--blue-25) 0%, #fff 40%, var(--blue-25) 100%); }

/* 2×2 카드 한 장에만 Electric Border — 모두에게 주면 다시 균질해집니다 */
.ecard--electric { border-color: transparent; }
.ecard--electric::after {
  opacity: 1;
  padding: 1.4px;
  background:
    conic-gradient(from calc(var(--eb, 0) * 1deg),
      transparent 0deg,
      var(--blue-400) 24deg,
      var(--green-400) 52deg,
      transparent 96deg,
      transparent 360deg),
    linear-gradient(var(--line-soft), var(--line-soft));
  transition: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ecard--electric { animation: ecoEB 6s linear infinite; }
}
@keyframes ecoEB { to { --eb: 360; } }
@property --eb { syntax: "<number>"; inherits: true; initial-value: 0; }

/* --------------------------------------------------------------------------
   7. Sample 05 — 최소 개입 (현행 카드 + 광원)
   -------------------------------------------------------------------------- */
.eco-s05 { background: linear-gradient(180deg, #fff, var(--blue-25)); }
.eco-grid-auto {
  display: grid; gap: clamp(14px, 1.8vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.eco-s05 .ecard__title { margin-top: 12px; }

/* --------------------------------------------------------------------------
   8. 반응형 · reduced motion
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .eco-bento { grid-template-columns: repeat(2, 1fr); }
  .ecard[data-span="2x2"] { grid-row: span 1; }          /* 2x2 → 2x1 강등 */
  .ecard[data-span="2x2"] { --preview-h: 150px; }
  .eco-grid3 { grid-template-columns: repeat(2, 1fr); }
  .eco-flow__sub { display: none; }
}

@media (max-width: 900px) {
  /* 2열로는 카드가 좁아져 프리뷰가 뭉갭니다 — 1열로 펴고 비율 고정을 풉니다 */
  .eco-live__grid { grid-template-columns: 1fr; }
  .eco-live .ecard { aspect-ratio: auto; min-height: 300px; }
}

@media (max-width: 640px) {
  .eco-bento, .eco-grid3, .eco-grid-auto { grid-template-columns: 1fr; }
  .ecard[data-span="2x2"],
  .ecard[data-span="2x1"] { grid-column: span 1; grid-row: span 1; }
  .ecard__row { grid-template-columns: 68px minmax(0, 1fr); gap: 10px; }
  .eco-flow__link { gap: 12px; padding: 18px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .ecard::before, .ecard::after { opacity: 0 !important; }
  .ecard--electric::after { opacity: 1 !important; }
  .eco-bg--scan::after { display: none; }
  .eco-flow__track { animation: none; }
  .eco-flow__marquee { transition: none; }
}