/*
 * 3D 아이콘 층 (<html data-visual="icons">, index.html)
 * 원칙: 사진 자리에 3D 아이콘을 놓는다. 아이콘 칸 바탕은 무채색 회색.
 * 아이콘: Microsoft Fluent Emoji 3D (MIT) — assets/img/icons/ · 원본 256px 이라 표시 크기는 200px 이하로 둔다
 */

/* ---------- 아이콘 칸 공통 ---------- */
[data-visual='icons'] .art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--gray-100);
}

[data-visual='icons'] .art img {
  flex: none;
  width: var(--art-size, 40%);
  max-width: 200px;
  height: auto;
  max-height: 76%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 0;
}

/* 세 개짜리: 가운데가 주인공, 양옆은 조금 작고 살짝 겹친다 */
[data-visual='icons'] .art--3 img:nth-child(2) {
  position: relative;
  z-index: 1;
  width: calc(var(--art-size, 40%) * 1.3);
}

[data-visual='icons'] .art--3 img:nth-child(1) {
  margin-right: calc(var(--art-size, 40%) * -0.12);
  transform: translateY(12%);
}

[data-visual='icons'] .art--3 img:nth-child(3) {
  margin-left: calc(var(--art-size, 40%) * -0.12);
  transform: translateY(12%);
}

/* 두 개짜리: 뒤쪽이 주인공, 앞쪽은 조금 작고 살짝 겹친다 */
[data-visual='icons'] .art--2 img:nth-child(2) {
  position: relative;
  z-index: 1;
  width: calc(var(--art-size, 40%) * 1.3);
}

[data-visual='icons'] .art--2 img:nth-child(1) {
  margin-right: calc(var(--art-size, 40%) * -0.12);
  transform: translateY(12%);
}

/* ---------- 상단 띠: 사진·그라데이션을 걷고 오른쪽에 타일 + 아이콘 ----------
   사진이 없으니 띠 높이를 글에 맞추고 위아래 여백(--hero-pad)을 같게 둔다. 아이콘은 띠 한가운데 높이에. */
[data-visual='icons'] .hero__strip {
  --hero-pad: 129px; /* 86px × 1.5 (2026-10-26) */
  /* 아이콘과 타일이 같이 쓰는 폭. 값 안의 %는 쓰는 자리(둘 다 띠 폭 기준)에서 계산된다 */
  --edge: max(var(--gutter), calc((100% - var(--container)) / 2)); /* 본문 칸 바깥 여백 */
  --tiles-w: min(40%, 540px); /* 본문 오른쪽 끝에서 타일 영역 폭 */
  height: auto;
}

[data-visual='icons'] .hero__copy {
  height: auto;
  padding-block: var(--hero-pad);
}

[data-visual='icons'] .hero__shade {
  display: none;
}

/* 아이콘은 오른쪽 타일 영역(본문 오른쪽 끝에서 --tiles-w 만큼) 한가운데. %는 모두 띠 폭 기준 */
[data-visual='icons'] .hero__photo.art {
  --art-size: clamp(110px, 10.4vw, 150px);
  justify-content: center;
  padding-left: calc(100% - var(--edge) - var(--tiles-w));
  padding-right: var(--edge);
  background: transparent;
}

[data-visual='icons'] .hero__photo img {
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35));
}

/* 핵심 수치 위 구분선이 오른쪽 타일을 가로지르지 않게 글 폭까지만 */
[data-visual='icons'] .hero__facts {
  width: fit-content;
}

/* ---------- 띠 오른쪽 타일 (2026-10-26, 유아이볼 시안 비교에서 고름) ----------
   한 칸 = 한 달, 3칸마다 옅게 → 짙은 초록 → 밝은 초록(분기 말 지급). 한 줄 11칸(3의 배수가 아님)이라 이 주기가 사선으로 흐르고,
   분기 말 칸에 형광 빛이 달 순서대로 하나씩 지나간다(6초에 한 바퀴). 띠 밖으로 넘친 칸은 띠가 잘라 낸다. */
[data-visual='icons'] .hero__tiles {
  --tile: 104px;
  position: absolute;
  top: -40px;
  bottom: -40px;
  right: -40px;
  width: calc(var(--edge) + var(--tiles-w) + 40px);
  display: grid;
  grid-template-columns: repeat(11, var(--tile));
  grid-auto-rows: var(--tile);
  gap: 12px;
  align-content: start;
}

[data-visual='icons'] .hero__tiles i {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  animation: hero-tile-in 0.5s var(--ease) both;
}

[data-visual='icons'] .hero__tiles i:nth-child(3n + 2) {
  background: #0F5A3A;
  animation-delay: 0.08s;
}

[data-visual='icons'] .hero__tiles i:nth-child(3n) {
  position: relative;
  background: #1E8C5A;
  animation-delay: 0.16s;
}

/* 형광 빛은 위에 겹친 층의 투명도만 바꾼다 — 바탕색을 매 프레임 다시 칠하지 않게 */
[data-visual='icons'] .hero__tiles i:nth-child(3n)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--neon, #3DF56B);
  opacity: 0;
  animation: hero-quarter-pay 6s ease-in-out calc(1s + var(--q) * 0.25s) infinite;
}

@keyframes hero-tile-in {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}

@keyframes hero-quarter-pay {
  5% { opacity: 1; }
  12% { opacity: 0; }
}

/* ---------- 모집 배너 ---------- */
[data-visual='icons'] .promo__photo .art {
  --art-size: min(54%, 176px);
  background: var(--navy-800);
}

/* ---------- 언론 보도 카드: 업무협약(악수) · 착공(공사) ---------- */
[data-visual='icons'] .press-card__art .art {
  --art-size: min(34%, 120px);
}

/* ---------- 그린: 띠·배너 칸 모두 밝은 회색, 글자는 어둡게 ---------- */
[data-theme='green'][data-visual='icons'] .hero__strip {
  background: var(--gray-100);
}

[data-theme='green'][data-visual='icons'] .hero__copy {
  color: var(--gray-900);
}

[data-theme='green'][data-visual='icons'] .hero__label {
  color: var(--green-700);
}

[data-theme='green'][data-visual='icons'] .hero__lead {
  color: var(--gray-700);
}

[data-theme='green'][data-visual='icons'] .hero__facts {
  border-top-color: var(--gray-300);
}

[data-theme='green'][data-visual='icons'] .hero__facts dt {
  color: var(--gray-600);
}

[data-theme='green'][data-visual='icons'] .promo__photo .art {
  background: var(--gray-100);
}

/* ---------- 상단 띠·이자 결과 칸·폰 하단 바만 남색 (<html data-hero="navy">, index.html) ----------
   그린 시안은 --navy-* 를 무채색으로 바꿔 두어서 남색 값을 따로 둔다. 띠 위 글자는 네이비 시안과 같게. */
:root[data-hero='navy'] {
  --hero-navy: #0D1B36;
}

[data-hero='navy'][data-visual='icons'] .hero__strip {
  background: var(--hero-navy);
}

[data-hero='navy'][data-visual='icons'] .hero__strip .hero__copy {
  color: #fff;
}

[data-hero='navy'][data-visual='icons'] .hero__strip .hero__label {
  color: var(--neon, var(--green-300));
}

[data-hero='navy'][data-visual='icons'] .hero__strip .hero__lead {
  color: rgba(255, 255, 255, 0.85);
}

[data-hero='navy'][data-visual='icons'] .hero__strip .hero__facts {
  border-top-color: rgba(255, 255, 255, 0.2);
}

[data-hero='navy'][data-visual='icons'] .hero__strip .hero__facts dt {
  color: rgba(255, 255, 255, 0.7);
}

/* 계산기의 '분기마다 받을 이자' 결과 칸만 남색 (2026-10-26)
   계산기 전체를 남색으로 바꿔 보니 가독성이 떨어져서, 바탕은 연한 회색 그대로 두고 결과 칸만 바꾼다.
   남색 위 숫자는 형광펜 대신 형광 글자(대비 11.7:1), 나머지 글자는 흰색 계열 */
[data-hero='navy'] .promo__panel .calc__result {
  background: var(--hero-navy);
  color: #fff;
}

[data-hero='navy'] .promo__panel .calc__result-sub,
[data-hero='navy'] .promo__panel .calc__muted,
[data-hero='navy'] .promo__panel .calc__result-split,
[data-hero='navy'] .promo__panel .calc__plus {
  color: rgba(255, 255, 255, 0.75);
}

[data-hero='navy'] .promo__panel .calc__result-label,
[data-hero='navy'] .promo__panel .calc__result-sub strong,
[data-hero='navy'] .promo__panel .calc__eq strong {
  color: #fff;
}

[data-hero='navy'] .promo__panel .calc__result-value,
[data-hero='navy'] .promo__panel .calc__result-value span {
  background: none;
  color: var(--neon, var(--green-400));
}

[data-hero='navy'] .promo__panel .calc__result.is-empty .calc__result-value {
  color: rgba(255, 255, 255, 0.5);
}

/* 출자금 + 대여금 = 입금 */
[data-hero='navy'] .promo__panel .calc__result-split {
  background: rgba(255, 255, 255, 0.08);
}

/* 세전·세후 토글 */
[data-hero='navy'] .promo__panel .seg {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

[data-hero='navy'] .promo__panel .seg button {
  color: rgba(255, 255, 255, 0.75);
}

[data-hero='navy'] .promo__panel .seg button[aria-checked='true'] {
  color: var(--neon-ink, var(--hero-navy));
}

/* 폰 하단 바(계산기를 지나면 나오는 '이자 계산하기' 줄)도 남색 (2026-10-26) */
[data-hero='navy'] .mobile-cta {
  border-top-color: transparent;
  background: var(--hero-navy);
}

[data-hero='navy'] .mobile-cta__info strong {
  color: #fff;
}

[data-hero='navy'] .mobile-cta__info span {
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 1023px) {
  /* 글이 띠 폭을 다 쓰므로 아이콘은 오른쪽 위로, 글 첫 줄과 같은 높이에서 시작 */
  [data-visual='icons'] .hero__photo.art {
    --art-size: 84px;
    align-items: flex-start;
    justify-content: flex-end;
    padding-left: 0;
    padding-top: var(--hero-pad);
  }

  /* 타일은 오른쪽에 작게 깔고, 글 쪽(왼쪽)으로 갈수록 흐려진다 */
  [data-visual='icons'] .hero__tiles {
    --tile: 72px;
    gap: 8px;
    width: calc(var(--gutter) + 46%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 45%, #000 85%);
    mask-image: linear-gradient(to right, transparent 0, transparent 45%, #000 85%);
  }
}

@media (max-width: 767px) {
  /* 폰에서는 아이콘을 글 위에 한 줄로 두고, 띠 위아래 여백을 같게 */
  [data-visual='icons'] .hero__strip {
    --hero-pad: 72px; /* 48px × 1.5 (2026-10-26) */
  }

  /* 흐름 안에 두되(relative) 뒤의 타일보다 위에 그린다 */
  [data-visual='icons'] .hero__photo.art {
    --art-size: 64px;
    position: relative;
    z-index: 1;
    justify-content: flex-start;
    padding: var(--hero-pad) var(--gutter) 0;
  }

  /* 타일은 위쪽 아이콘 줄 뒤에 띠처럼 깔고, 아래(글 쪽)로 흐려진다 */
  [data-visual='icons'] .hero__tiles {
    --tile: 52px;
    top: -10px;
    bottom: auto;
    left: -10px;
    right: 0;
    width: auto;
    height: calc(var(--hero-pad) + 104px);
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
    mask-image: linear-gradient(to bottom, #000 45%, transparent);
  }

  [data-visual='icons'] .hero__copy {
    padding-top: 20px;
  }
}