/* ==========================================================================
   landing.css — 랜딩 (간판 카드 인라인 오버레이 + 서브 도구 마이크로 팝오버)

   설계 근거: prd-redesign.md (순백 바탕, 오렌지 액센트, 웜 중립 팔레트)

   🔴 **이 파일은 index.php 에서만 싣는다.** 클래스 이름에 접두사가 없는 것들
      (card-micro-popover / popover-* / flow-overlay-* / trust-strip-*) 이 있는데,
      다른 페이지에 실으면 그것들이 전역으로 새어 나간다.

   🔴 **등장 효과는 CSS 단독으로 아무것도 숨기지 않는다.** 숨김은 JS 가
      `.landing.is-animated` 를 붙인 뒤에야 시작된다(landing.js 참조).
      CSS 로 먼저 숨기면 JS 가 실패했을 때 도구 그리드가 통째로 안 보인다.
   ========================================================================== */

.landing {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad) var(--spacing-2xl);
  color: var(--ink-900);
}

/* ─────────────────────────────────────────────────────────────
   1. 히어로 섹션
   ───────────────────────────────────────────────────────────── */
.landing-hero {
  padding: 72px 0 44px;
  text-align: center;
  position: relative;
}

.landing-hero-badge-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  color: var(--brand-700);
  font-size: var(--font-xs);
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
  letter-spacing: -0.01em;
}

.landing-hero-badge-top .pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-500);
  box-shadow: 0 0 0 0 rgba(217, 119, 87, 0.7);
  animation: landing-pulse 2s infinite;
}

@keyframes landing-pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(217, 119, 87, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 7px rgba(217, 119, 87, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(217, 119, 87, 0); }
}

.landing-hero-title {
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: var(--tracking-tighter);
  color: var(--ink-900);
  margin: 0 0 var(--spacing-lg);
}

.landing-hero-title .highlight-text {
  color: var(--brand-600);
  position: relative;
  display: inline-block;
}

.landing-hero-sub {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
  color: var(--ink-500);
  max-width: 620px;
  margin: 0 auto var(--spacing-xl);
  word-break: keep-all;
}

/* 히어로 스크롤 가이드 링크 (↓ 셀러 도구 라인업 보기) */
.landing-hero-scroll {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

.hero-scroll-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 22px;
  background: #ffffff;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-full);
  color: var(--ink-700);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all var(--transition-fast);
}

.hero-scroll-link:hover {
  border-color: var(--brand-400);
  color: var(--brand-600);
  background: var(--brand-50);
  transform: translateY(2px);
  box-shadow: 0 4px 14px rgba(217, 119, 87, 0.12);
}

.hero-scroll-link .scroll-arrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  color: var(--brand-500);
  animation: arrow-bounce 2s infinite ease-in-out;
}

@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* ─────────────────────────────────────────────────────────────
   2. 도구 카드 그리드 (순백 슬림 규격 + Progressive Enhancement)
   ───────────────────────────────────────────────────────────── */
.landing-tools-section {
  padding: 50px 0 80px;
}

.landing-section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}

.landing-section-tag {
  display: inline-block;
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--brand-600);
  background: var(--brand-50);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.landing-section-title {
  font-size: var(--font-3xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
  margin: 0 0 var(--spacing-sm);
}

.landing-section-header.is-tight {
  margin-bottom: 32px;
}

.landing-section-desc {
  font-size: var(--font-base);
  color: var(--ink-500);
  margin: 0;
  line-height: var(--line-loose);
}

/* 3열 그리드 */
.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-md);
  align-items: stretch;
}

@media (min-width: 900px) {
  .landing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 슬림 카드 본체.
   🔴 기본 상태는 **항상 온전히 보인다.** 숨김은 landing.js 가 `.is-animated` 를
      붙인 뒤에만 걸린다 — JS 가 죽어도 내용은 그대로 남는다. */
.landing-card {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg);
  background: #fff;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-lg);
  position: relative;
  min-height: 180px;
  opacity: 1;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              translate 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
}

/* 🔴 **등장은 `translate`, 호버는 `transform` 으로 분리한다 — 같은 속성을 쓰면 안 된다.**
   둘 다 transform 이면 등장 규칙(`.landing.is-animated .will-reveal.is-revealed`)이
   `.landing-card:hover` 보다 특이도가 높아 **호버 리프트가 조용히 죽는다.**
   테두리·그림자만 바뀌어서 "왜 밋밋하지" 로만 보이고 원인이 안 잡힌다.
   `translate` 와 `transform` 은 개별 속성이라 서로 덮지 않고 합성된다. */
.landing.is-animated .will-reveal {
  opacity: 0;
  translate: 0 20px;
}

.landing.is-animated .will-reveal.is-revealed {
  opacity: 1;
  translate: 0 0;
}

.landing-card:hover {
  border-color: var(--brand-500);
  box-shadow: 0 10px 28px rgba(217, 119, 87, 0.12);
  transform: translateY(-2px);
  z-index: 50; /* 호버 시 위로 올라와 팝오버가 이웃 카드에 가려지지 않음 */
}

/* 카드 상단: 아이콘 + 유형 라벨 */
.landing-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

.landing-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--brand-600);
  border: 1px solid var(--brand-100);
  transition: all var(--transition-fast);
}

.landing-card:hover .landing-card-icon {
  background: var(--brand-100);
  border-color: var(--brand-200);
  transform: scale(1.05);
}

.landing-card-icon svg {
  width: 22px;
  height: 22px;
}

.landing-card-form {
  font-size: var(--font-2xs);
  font-weight: 600;
  color: var(--ink-500);
  padding: 2px 8px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* 카드 텍스트 (호버 시에도 절대 숨겨지지 않고 또렷하게 유지!) */
.landing-card-name {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-md);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}

.landing-card-desc {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-sm);
  line-height: var(--line-loose);
  color: var(--ink-500);
}

.landing-card-meta {
  font-size: var(--font-xs);
  color: var(--ink-500);
  margin-bottom: var(--spacing-xs);
}

/* ─────────────────────────────────────────────────────────────
   카드 전체 클릭 층 — 카드의 **유일한 진짜 링크**.

   🔴 **본문 링크를 `::before` 로 늘리지 말 것.** 그렇게 하면 링크가 본문 계층
      안에 있어서, 간판 카드의 오버레이(z-index 20)와 `opacity` 페이드가 만드는
      쌓임 맥락에 갇힌다. 실제 마우스로 재현했을 때 **보이는 버튼을 정확히 눌러도
      0/3** 으로 씹혔다(서브 카드는 3/3 성공 — 오버레이가 없어서다).
      이 층은 카드의 **직속 자식**이라 자식이 어떻게 투명해지든 영향이 없다.
   🔴 **z-index 는 오버레이(20)보다 위여야 한다.**
   🔴 **`border-radius` 에 `inherit` 을 쓰지 말 것** — 알약 모양 링크의 반지름을
      물려받으면 이 층이 거대한 타원이 되어 네 귀퉁이가 클릭 사각지대가 된다.
   ───────────────────────────────────────────────────────────── */
.landing-card-hit {
  position: absolute;
  inset: 0;
  z-index: 40;
  border-radius: var(--radius-lg);
  text-indent: -9999px;
  overflow: hidden;
  -webkit-user-drag: none;
}

/* 🔴 `user-select: none` 이 없으면 드래그가 텍스트 선택으로 잡혀 클릭이 씹힌다. */
.landing-card:has(.landing-card-hit) {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* 키보드 초점 — 링크가 투명하므로 카드에 테두리를 그려 준다. */
.landing-card:has(.landing-card-hit:focus-visible) {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

/* 카드 바닥 액션 */
.landing-card-action {
  margin-top: auto;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--ink-200);
}

.landing-card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-900);
  font-size: var(--font-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.landing-card-link::after {
  content: '→';
  transition: transform var(--transition-fast);
}

.landing-card-link:hover {
  color: var(--brand-600);
}

.landing-card:hover .landing-card-link::after {
  transform: translateX(4px);
}

.landing-card-hint {
  font-size: var(--font-xs);
  color: var(--ink-400);
  line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────
   간판 카드 (Flow) : 데스크톱 2열 와이드 + 내부 인라인 오버레이
   ───────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .landing-card.is-feature {
    grid-column: span 2;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: var(--spacing-lg);
    align-items: center;
    padding: var(--spacing-xl);
    overflow: hidden;
  }

  .landing-card.is-feature .landing-card-head {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .landing-card.is-feature .landing-card-icon {
    width: 54px;
    height: 54px;
  }

  .landing-card.is-feature .landing-card-icon svg {
    width: 28px;
    height: 28px;
  }

  .landing-card.is-feature .landing-card-form {
    position: absolute;
    top: var(--spacing-xl);
    right: var(--spacing-xl);
  }

  .landing-card.is-feature .landing-card-name {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--font-xl);
    margin: 0;
    align-self: end;
  }

  .landing-card.is-feature .landing-card-desc {
    grid-column: 2;
    grid-row: 2;
    margin: 4px 0 0;
    align-self: start;
  }

  .landing-card.is-feature .landing-card-action {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    justify-self: end;
  }

  .landing-card.is-feature .landing-card-link {
    background: var(--ink-900);
    color: #fff !important;
    padding: 10px 24px;
    border-radius: var(--radius-full);
    font-size: var(--font-sm);
    font-weight: 700;
  }

  .landing-card.is-feature .landing-card-link::after {
    content: none;
  }

  .landing-card.is-feature .landing-card-link:hover {
    background: var(--ink-800);
    transform: translateY(-1px);
  }

  /* 간판 카드 인라인 오버레이 (데스크톱 마우스 호버 시에만 부드럽게 등장) */
  .landing-card.is-feature .card-hover-overlay {
    position: absolute;
    inset: 0;
    background: #ffffff;
    border-radius: inherit;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    z-index: 20;
    overflow: hidden;
  }

  .landing-card.is-feature:hover .card-hover-overlay,
  .landing-card.is-feature.is-hovered .card-hover-overlay {
    opacity: 1;
    visibility: visible;
  }

  .landing-card.is-feature:hover > *:not(.card-hover-overlay),
  .landing-card.is-feature.is-hovered > *:not(.card-hover-overlay) {
    opacity: 0;
    transition: opacity 0.15s ease;
  }
}

/* 간판 카드 내부 오버레이 레이아웃 */
.flow-overlay-inner {
  display: flex;
  width: 100%;
  height: 100%;
}

.flow-overlay-media {
  flex: 1.1;
  position: relative;
  height: 100%;
  overflow: hidden;
}

.flow-overlay-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 🔴 사선 슬라이스(Diagonal Wipe)로 누끼 ➔ AI 연출컷이 자연스럽게 교체되는 모션
   (매직브러시와 동일한 패턴: 원본 정지 ➔ 사선 전환 ➔ 연출컷 정지 ➔ 복귀) */
.flow-overlay-media img.after {
  animation: flow-diagonal-wipe 5s infinite cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
  opacity: 1;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

@keyframes flow-diagonal-wipe {
  /* 1단계: 원본 누끼 100% 정지 (0초 ~ 1.4초) */
  0%, 28% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  /* 2단계: 사선으로 슥- 열려 AI 연출컷으로 전환 후 1.5초 정지 유지 (2.4초 ~ 3.9초) */
  48%, 78% {
    clip-path: polygon(0 0, 130% 0, 105% 100%, 0 100%);
  }
  /* 3단계: 다시 사선으로 슥- 닫히며 원본 누끼로 복귀 */
  95%, 100% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
}

/* 하단 상태 뱃지 (누끼 ↔ AI 연출 이미지와 동기화 교체) */
.flow-overlay-pill {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 5;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
}

.flow-overlay-pill.pill-before {
  animation: pill-before-fade 5s infinite cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(20, 19, 15, 0.85);
  color: #fff;
  opacity: 1;
}

.flow-overlay-pill.pill-after {
  animation: pill-after-fade 5s infinite cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(217, 119, 87, 0.95);
  color: #fff;
  box-shadow: 0 2px 8px rgba(217, 119, 87, 0.4);
  opacity: 0;
}

@keyframes pill-before-fade {
  0%, 32% { opacity: 1; }
  45%, 82% { opacity: 0; }
  93%, 100% { opacity: 1; }
}

@keyframes pill-after-fade {
  0%, 32% { opacity: 0; }
  45%, 82% { opacity: 1; }
  93%, 100% { opacity: 0; }
}

.flow-overlay-info {
  flex: 1;
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  border-left: 1px solid var(--ink-200);
}

/* 🔴 오버레이 버튼은 폭을 내용에 맞춘다 — .flow-overlay-info 가 flex 컬럼이라
   기본값(align-items: stretch)으로 두면 검정 알약이 패널 전체로 늘어나고
   글자만 왼쪽에 붙는다. */
.flow-overlay-info .landing-card-link {
  align-self: flex-start;
}

.flow-overlay-badge {
  font-size: 11px;
  font-weight: 800;
  color: var(--brand-600);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.flow-overlay-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink-900);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.flow-overlay-cost {
  font-size: 11px;
  font-weight: 700;
  color: #2e7d32;
  margin-bottom: 6px;
}

.flow-overlay-desc {
  font-size: 12px;
  color: var(--ink-500);
  margin: 0 0 12px;
  line-height: 1.5;
}

/* 준비 중 카드 */
.landing-card.is-soon {
  border-style: dashed;
  border-color: var(--ink-200);
  background: transparent;
}

.landing-card.is-soon:hover {
  border-color: var(--ink-200);
  box-shadow: none;
  transform: none;
}

.landing-card.is-soon .landing-card-name {
  color: var(--ink-500);
}

.landing-card.is-soon .landing-card-icon {
  background: transparent;
  border: 1px dashed var(--ink-200);
  color: var(--ink-300);
}

/* ─────────────────────────────────────────────────────────────
   ✨ 서브 도구 전용: 슬림 가로형 플로팅 마이크로 팝오버
   모든 도구의 높이를 76px 로 100% 완벽 통일 (Auto-Flip 지원)
   ───────────────────────────────────────────────────────────── */
.card-micro-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 270px;
  background: #fff;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.05);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
  z-index: 999;
  overflow: hidden;
}

/* 상단 위치 시 화살표 (아래쪽을 가리킴) */
.card-micro-popover::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #fff;
  border-right: 1px solid var(--ink-300);
  border-bottom: 1px solid var(--ink-300);
}

/* [스마트 반전: Auto-Flip] 화면 상단 여백 부족 시 카드 아래로 반전 */
.card-micro-popover.popover-below {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}

.card-micro-popover.popover-below::after {
  bottom: auto;
  top: -5px;
  border-right: none;
  border-bottom: none;
  border-left: 1px solid var(--ink-300);
  border-top: 1px solid var(--ink-300);
}

/* 마우스 호버 지원 환경: 화면 너비와 무관하게 모든 도구 팝오버를 일관된 슬림 규격으로 표시 */
@media (hover: hover) and (pointer: fine) {
  .landing-card:hover .card-micro-popover,
  .landing-card.is-hovered .card-micro-popover {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) !important;
  }
}

/* 🔴 **연출 애니메이션은 그냥 계속 돈다 — 호버에 묶지 말 것.**
   배터리를 아끼려고 두 번 시도했다가 두 번 다 사용자 신고로 되돌렸다.
     ① `animation-play-state: paused` → **일시정지는 재생 위치를 기억한다.**
        90%(다 열린 지점)에서 멈춰 있으면 다시 올려도 아무 일이 안 일어난다.
     ② 호버할 때만 `animation` 선언 → 재시작은 되지만, 카드가 호버 시 2px
        떠오르며 `:hover` 가 깜빡이면 그때마다 0% 로 되감긴다. 앞 1.4초가
        "정지" 구간이라 **영영 전환을 못 보는** 경우가 생긴다.
   무한 루프 몇 개의 비용보다 **"눌렀는데 안 도네" 가 훨씬 비싸다.**
   되살리고 싶으면 위 두 실패를 먼저 읽을 것. */

/* 팝오버 헤더 (높이 25px 통일) */
.popover-head {
  padding: 5px 10px;
  background: var(--ink-900);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: -0.01em;
}

.popover-head .popover-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-400);
}

/* 모든 서브 도구의 바디 높이를 76px 로 통일한다.
   🔴 **`.popover-*-stage` 에 `height` 를 다시 쓰지 말 것.** 두 클래스는 같은 div 에
      함께 붙으므로(`class="popover-body popover-brush-stage"`) 특이도가 같고,
      뒤에 오는 stage 쪽이 이긴다. 예전에 stage 가 `height:100%` 를 갖고 있었는데
      부모(.card-micro-popover)에 높이가 없어 `auto` 로 풀렸고, 자식이 전부
      `position:absolute` 인 매직브러시만 **높이 0 으로 찌부러졌다**
      (헤더만 뜨고 사진이 안 나온다). 다른 씬은 글자가 in-flow 라 안 걸려서
      한참 못 찾는다. `!important` 로 덮지 말고 stage 에서 height 를 빼는 게 맞다. */
.popover-body {
  position: relative;
  width: 100%;
  height: 76px;
  background: var(--ink-100);
  overflow: hidden;
  box-sizing: border-box;
}

/* 1. 매직브러시 슬림 씬 (76px 통일 규격, 워터마크 자동 지우개 모션).
   🔴 크기·overflow 는 .popover-body 가 이미 정한다 — 여기서 다시 쓰지 않는다. */
.popover-brush-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

.popover-brush-wm {
  animation: popover-erase-loop 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  inset: 0;
  z-index: 2;
}

@keyframes popover-erase-loop {
  0%, 25% { clip-path: inset(0 0 0 0); opacity: 1; }
  55%, 85% { clip-path: inset(0 0 0 100%); opacity: 0; }
  95%, 100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

.popover-brush-cursor {
  animation: popover-cursor-loop 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  top: 26%;
  left: 15%;
  z-index: 5;
  background: var(--brand-500);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px rgba(217, 119, 87, 0.4);
  white-space: nowrap;
}

@keyframes popover-cursor-loop {
  0%, 20% { transform: translate(0, 0); opacity: 1; }
  50% { transform: translate(90px, 12px); opacity: 1; }
  60%, 85% { transform: translate(90px, 12px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

.popover-brush-badge {
  position: absolute;
  bottom: 5px;
  z-index: 6;
  font-size: 8px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 3px;
}

.popover-brush-badge.wm-badge {
  animation: badge-fade-wm 4s infinite ease-in-out;
  left: 6px;
  background: rgba(211, 47, 47, 0.9);
  color: #fff;
}

.popover-brush-badge.clean-badge {
  animation: badge-fade-clean 4s infinite ease-in-out;
  right: 6px;
  background: rgba(46, 125, 50, 0.9);
  color: #fff;
}

@keyframes badge-fade-wm {
  0%, 30% { opacity: 1; }
  50%, 90% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes badge-fade-clean {
  0%, 40% { opacity: 0; }
  55%, 85% { opacity: 1; }
  95%, 100% { opacity: 0; }
}

/* 2. 소스메이커 슬림 씬 (76px 통일 규격) */
.popover-source-stage {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #191815;
}

.popover-source-thumb {
  width: 54px;
  height: 54px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.popover-source-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.popover-source-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.popover-source-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popover-source-tag {
  background: var(--brand-500);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.02em;
}

.popover-source-status {
  font-size: 8px;
  color: #81c784;
  font-weight: 700;
}

.popover-source-name {
  animation: stamp-pop 2.5s infinite ease-in-out;
  color: #f5f5f5;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes stamp-pop {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.02); opacity: 1; color: var(--brand-400); }
}

/* 3. 매크로냥 슬림 씬 (76px 통일 규격, --brand-200 정확한 변수 사용) */
.popover-macro-stage {
  padding: 8px 12px;
  background: #fdfaf7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.popover-macro-box {
  background: #fff;
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.popover-macro-head {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  margin-bottom: 3px;
}

.popover-macro-supplier {
  font-weight: 700;
  color: var(--ink-700);
}

.popover-macro-soldout {
  color: #d32f2f;
  font-weight: 800;
  font-size: 9px;
}

.popover-macro-match {
  animation: macro-pop 2.2s infinite ease-in-out;
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: 2px;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--brand-700);
}

.popover-macro-badge {
  background: var(--brand-500);
  color: #fff;
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 9px;
}

@keyframes macro-pop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

/* 4. 냥AI 슬림 씬 (76px 통일 규격) */
.popover-catai-stage {
  padding: 8px 12px;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.popover-catai-old {
  font-size: 9px;
  color: var(--ink-400);
  text-decoration: line-through;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popover-catai-new {
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: 4px;
}

.popover-catai-sync {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 8.5px;
  font-weight: 700;
  color: #2e7d32;
  background: #e8f5e9;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  width: fit-content;
}

/* 5. 이미지 호스팅 슬림 씬 (76px 통일 규격) */
.popover-imghost-stage {
  padding: 8px 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.popover-imghost-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--ink-50);
  border: 1px solid var(--ink-300);
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 9.5px;
  font-family: ui-monospace, monospace;
  color: var(--ink-700);
  width: 100%;
  box-sizing: border-box;
}

.popover-imghost-note {
  font-size: 9px;
  color: var(--ink-500);
}

.popover-imghost-copy {
  background: var(--ink-900);
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 2px;
  margin-left: auto;
}

/* 6. 키워드 조회 슬림 씬 (76px 통일 규격)
   🔴 `height` 를 여기 쓰지 말 것 — `.popover-body` 와 같은 div 라 특이도가 같아
      뒤에 오는 이쪽이 이긴다(위 .popover-body 주석의 사고와 같은 자리).
   🔴 두 숫자에 **다른 색을 주되 「좋다/나쁘다」로 읽히게 하지 않는다** — 검색량은
      brand, 상품수는 ink 다. 상품수가 적은 것이 오히려 기회인 경우가 있어
      초록/빨강으로 물들이면 화면이 조용히 거짓말을 한다(plan §2-2). */
.popover-keyword-stage {
  padding: 8px 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.popover-kw-word {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -0.02em;
}

.popover-kw-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink-50);
  border: 1px solid var(--ink-300);
  border-radius: 4px;
  padding: 4px 10px;
}

.popover-kw-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.popover-kw-label {
  font-size: 8px;
  color: var(--ink-500);
  letter-spacing: -0.01em;
}

.popover-kw-vol,
.popover-kw-prod {
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.popover-kw-vol  { color: var(--brand-500); }
.popover-kw-prod { color: var(--ink-700); }

.popover-kw-div {
  width: 1px;
  align-self: stretch;
  background: var(--ink-300);
}

/* ─────────────────────────────────────────────────────────────
   3. 세련된 다크 차콜 신뢰 인포 밴드 (Flow & 도팡 핵심 가치)
   ───────────────────────────────────────────────────────────── */
.landing-trust-strip {
  margin: 50px 0 36px;
  padding: 24px 28px;
  background: #201f1c;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

.trust-strip-container {
  width: 100%;
}

.trust-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 960px) {
  .trust-strip-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 580px) {
  .trust-strip-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.trust-strip-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.trust-strip-icon {
  font-size: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.trust-strip-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trust-strip-headline {
  font-size: 13.5px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.trust-strip-desc {
  font-size: 11px;
  color: #a3a19b;
  line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────
   4. 유료 도구 이용 방법 (3단계 인포그래픽)
   ───────────────────────────────────────────────────────────── */
.landing-how-section {
  padding: 80px var(--spacing-xl);
  background: var(--ink-50);
  border-radius: var(--radius-xl);
  margin-top: var(--spacing-2xl);
  border: 1px solid var(--ink-200);
}

.landing-how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.landing-how-step {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.landing-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink-900);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-sm);
  font-weight: 800;
}

.landing-step-title {
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0;
}

.landing-step-desc {
  font-size: var(--font-sm);
  color: var(--ink-500);
  line-height: var(--line-loose);
  margin: 0;
}

.landing-step-desc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 600;
}

.landing-how-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--ink-200);
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.landing-how-note {
  font-size: var(--font-sm);
  color: var(--ink-600);
  margin: 0;
}

.landing-how-link {
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--brand-600);
  text-decoration: none;
}

.landing-how-link:hover {
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────
   5. 반응형 최적화 & 터치 디바이스 가드
   좁은 화면일 때 플로팅이 비정상적으로 커지거나 카드를 가리는 현상 완전 차단
   ───────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .landing-hero { 
    padding: 48px 0 32px; 
  }

  /* 좁은 화면에서는 간판 카드(Flow) 오버레이 대신 기본 카드로 표시 */
  .card-hover-overlay {
    display: none !important;
  }

  /* 좁은 화면에서도 팝오버가 화면 밖으로 넘치지 않도록 너비 제한 */
  .card-micro-popover {
    max-width: calc(100vw - 40px);
  }
}

/* 터치스크린 디바이스(스마트폰/태블릿 터치 조작) 가드:
   터치 시 팝오버가 카드를 덮거나 클릭을 방해하지 않도록 완전 차단 */
@media (hover: none) and (pointer: coarse) {
  .card-micro-popover,
  .card-hover-overlay {
    display: none !important;
  }
}

/* 접근성: 애니메이션 축소 선호 사용자 대응.
   🔴 등장 효과는 여기서 끄지 않아도 된다 — landing.js 가 이 설정을 보고
      `.is-animated` 자체를 안 붙인다(숨김이 시작되지 않는다). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}