/**
 * ============================================================================
 * 새 대화 첫 화면 — 서비스 갈림길 (두 얼굴 공유)
 * ============================================================================
 *
 * `bundleAssets.mjs` 의 `SHARED_INTO_LEGACY` 가 이 파일을 두 벌 모두에 넣는다.
 * `sgax_entry.js` 와 짝이다 — 마크업이 한 벌이면 스타일도 한 벌이어야 한다.
 *
 * 옮겨 오기 전에는 옛 얼굴의 `sgax_components.css` 에만 있었다. 연예인 화면에도
 * 갈림길을 두면서(2026-09-10 운영팀 확인) 두 벌이 필요해졌다.
 *
 * 로드 순서: `sgax_core.css` 다음 — `--font-size-*` 같은 변수를 그쪽이 정의한다.
 * ============================================================================
 */

/* ============================================================================
   새 대화 첫 화면 — 서비스 갈림길 (운영팀 수정요청 2026-09-04 · 1쪽)
   ============================================================================
   서버 컴포넌트가 아니라 화면에서만 사는 갈림길이다 (`askServiceFace` ·
   sgax_handlers.js). 시안대로 **나란한 카드 둘**이고 섭외공고가 먼저다.

   `celebrity-branch-btn` 을 안 빌리는 이유: 그 클래스는 진짜 컴포넌트
   (`CELEBRITY_SELECT_BRANCH`)가 같이 쓴다 — 여기를 고치면 그 화면도 바뀐다.
   ============================================================================ */
.sgax-entry-options {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.sgax-entry-card {
  /* 시안의 비율 — 섭외공고 쪽이 넓다. 설명 줄이 길어 그쪽이 더 필요하다 */
  flex: 1.7 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.sgax-entry-card-celeb { flex: 1.15 1 0; }

.sgax-entry-card:hover:not(:disabled) {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.sgax-entry-card:disabled { cursor: default; opacity: 0.6; transform: none; box-shadow: none; }

/* 아이콘은 동그란 바탕 위에 얹는다 — 글자(AI)든 선 아이콘이든 같은 자리다 */
.sgax-entry-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: var(--font-size-lg);
  line-height: 1;
}
.sgax-entry-icon-general { background: rgba(var(--primary-rgb), 0.12); }
/* 섭외공고 카드의 확성기 — 이모지(📢) 대신 선 아이콘 (운영팀 검수 2026-09-11 · 1번).
   두 얼굴이 이 원본 하나를 쓰므로 모양도 여기 둔다. 모양은 Tabler Icons(MIT)를 따랐다. */
.sgax-entry-glyph {
  width: 22px;
  height: 22px;
  background-color: var(--primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a3 3 0 0 1 0 6'/%3E%3Cpath d='M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5'/%3E%3Cpath d='M12 8h0l4.524 -3.77a.9 .9 0 0 1 1.476 .692v12.156a.9 .9 0 0 1 -1.476 .692l-4.524 -3.77h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a3 3 0 0 1 0 6'/%3E%3Cpath d='M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5'/%3E%3Cpath d='M12 8h0l4.524 -3.77a.9 .9 0 0 1 1.476 .692v12.156a.9 .9 0 0 1 -1.476 .692l-4.524 -3.77h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sgax-entry-icon-celeb {
  /* 시안의 보라 — 「AI」 쪽만 브랜드 색과 다르게 두어 둘이 한눈에 갈린다.
     아이콘 그림이 얹히면 그 뒤 바탕이 된다(투명 PNG 라도 동그라미가 남는다). */
  background: #6c47ff;
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow: hidden;
}

/* 아이콘 그림을 먼저 시도하고, 없으면 「AI」 글자를 쓴다.
   `onerror` 가 `<img>` 를 지우면 아래 형제 규칙이 안 걸려 글자가 드러난다 —
   JS 로 클래스를 붙였다 뗐다 하지 않아도 되고, 그림이 뜨는 동안 글자가
   깜빡이지도 않는다. 그림은 쇼글 웹서버가 낸다(`/images/ui/icon_ai.png`). */
.sgax-entry-icon-celeb img {
  width: 100%;
  height: 100%;
  /* 자르지 않는다 — 글리프형 아이콘이 잘리면 무엇인지 알아볼 수 없다.
     남는 자리는 위 보라 바탕이 메운다. */
  object-fit: contain;
}
.sgax-entry-icon-celeb img + .sgax-entry-icon-text { display: none; }

.sgax-entry-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sgax-entry-title {
  font-weight: 700;
  font-size: var(--font-size-md);
  color: var(--text);
  /* 제목은 안 접는다 — 「AI로 연예인 견적 받 / 기」로 두 줄이 되면 카드가 시안과
     달라지고 설명 줄까지 밀린다. 정 좁으면 말줄임이 낫다. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sgax-entry-desc {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  /* 좁은 칸에서 설명이 카드를 늘리지 않게 한 줄로 자른다 (시안의 「셀럽…」) */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sgax-entry-badge {
  position: absolute;
  top: -8px;
  right: 12px;
  padding: 2px 8px;
  border-radius: 8px;
  background: #6c47ff;
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1.5;
}

/* 좁은 화면에서는 위아래로 — 나란히 두면 설명이 다 잘린다 */
@media (max-width: 640px) {
  .sgax-entry-options { flex-direction: column; }
  .sgax-entry-card, .sgax-entry-card-celeb { flex: 1 1 auto; }
  .sgax-entry-desc { white-space: normal; }
}