/* ============================================================
   FLOW 공통 UI 표준 (서브페이지용) — 버튼 · 카드 hover · CTA 라벨확장
   - style.css 뒤에 로드되는 스코프 오버레이. FLOW 랜딩(alt_flow.html) 컴포넌트 언어와 정렬.
   - 카드/버튼 hover 는 마크업 무수정(순수 CSS 오버라이드).
   - CTA 라벨확장은 옵트인 토큰 .btn-more 를 소수 '이동' 성격 링크에만 부여(단일 클래스 토큰, 구조 무변).
   - 규칙: 그린 최소(밝은 배경 primary=중립 다크 유지·다크 구간만 그린), AI티 없음, 화살표 이동.
   ============================================================ */

/* ============ 1. 버튼: FLOW 화살표 거동 + 우상향 변형 ============ */
/* .btn .ic 는 style.css 에서 이미 translateX(4px). FLOW 의 .ur(우상향) 변형만 보강 */
.btn:hover .ic.ur { transform: translate(3px, -3px); }

/* 다크 구간(.on-dark) primary = FLOW 단일 그린 액센트(잉크 텍스트→hover 흰색).
   밝은 배경 primary(다크 bg·43곳)는 style.css 중립 유지 = '그린 최소' 원칙 준수 */
.on-dark .btn-pri { background: var(--accent); color: #04130A; }
.on-dark .btn-pri:hover { background: #fff; color: var(--ink); }

/* ============ 2. 카드 hover 통일: FLOW 서브틀 리프트 + 소프트 섀도 + 이미지 리빌 ============ */
/* 뉴스·카드뉴스 카드(.ncard) — 라운드를 FLOW(12px)로, transform 리프트 추가.
   opacity 를 transition 에 유지해 리빌(.rv 페이드)이 깨지지 않게 함 */
.ncard {
  border-radius: var(--r-m);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease),
              transform .35s var(--ease), opacity .6s var(--ease);
}
.ncard:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -18px rgba(10, 15, 13, .22);
  border-color: var(--line);
}
.ncard:hover .ncard-media img { transform: scale(1.05); }
/* 캡처(html.shot)·리빌 전(.rv:not(.in))에는 리프트 억제 — 좌표/리빌 방해 방지 */
html.shot .ncard, html.shot .ncard:hover { transform: none; }

/* 제품 행(.prow)·게시판 행(.brow) — 행 semantics 라 리프트 대신 배경 리빌 + 화살표 슬라이드(이미 정의됨) 유지.
   FLOW 소프트 섀도 감도만 살짝 얹어 통일감 */
.prow { transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.prow:hover { box-shadow: 0 10px 30px -22px rgba(10, 15, 13, .3); }

/* 사업 이미지 카드(.bizcard) — 정적 hover 에 FLOW 소프트 섀도 통일(서브페이지 한정) */
.bizcard { transition: box-shadow .3s var(--ease), transform .35s var(--ease); }
.bizcard:hover { transform: translateY(-4px); box-shadow: 0 24px 54px -26px rgba(10, 15, 13, .5); }
html.shot .bizcard, html.shot .bizcard:hover { transform: none; }

/* ============ 3. CTA 라벨확장: 알약형 스윕 필 (.btn-more 옵트인) ============ */
/* 기존 마크업 `<a class="btn btn-ghost btn-more">라벨<span class="ic">→</span></a>` 재사용.
   at rest: 아웃라인 알약 + 화살표 / hover: 잉크 필이 좌→우 스윕하며 라벨이 흰색으로 '확장' + 화살표 슬라이드 */
.btn.btn-more {
  position: relative; isolation: isolate; overflow: hidden;
  height: 46px; padding: 0 22px; border-radius: var(--r); /* FLOW 버튼 라디우스(8px)와 통일 — 알약 대신 rect */
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.btn.btn-more::before {
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .5s var(--ease);
}
.btn.btn-more:hover { color: #fff; border-color: var(--ink); }
/* btn-lg 조합 — .btn.btn-more(46px)가 .btn-lg(52px)를 이기던 특이도 역전 보정 */
.btn.btn-more.btn-lg { height: 52px; padding: 0 32px; font-size: var(--fs-body); }
.btn.btn-more:hover::before { transform: scaleX(1); }
/* 화살표: 표준 직선 화살표 그대로 (원형 칩 폐지 — 2026-08-25 전 사이트 화살표 단일화) */
.btn.btn-more .ic {
  width: 16px; height: 16px; margin: 0 -2px 0 2px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .35s var(--ease);
}
.btn.btn-more .ic svg { width: 16px; height: 16px; }
.btn.btn-more:hover .ic { transform: translateX(3px); }

/* 다크 구간 위 .btn-more(예: on-dark 밴드) — 필 색을 흰색으로 반전 */
.on-dark .btn.btn-more { border-color: var(--w-line); color: #fff; background: transparent; }
.on-dark .btn.btn-more::before { background: #fff; }
.on-dark .btn.btn-more:hover { color: var(--ink); border-color: #fff; }

/* 캡처·모션축소 폴백: 스윕 즉시 완료 방지(정적) */
html.shot .btn.btn-more::before { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
  .btn.btn-more::before { transition: none; }
  .btn.btn-more .ic, .btn:hover .ic { transition: none; }
}

@media (max-width: 640px) {
  .btn.btn-more { height: 44px; padding: 0 20px; }
}