/* 공유 모달 전용 스타일. base.html에서 로드. 공통 .modal-overlay/.modal-card는 main.css. */

/* 열기/닫기 애니메이션(180ms). prefers-reduced-motion은 비활성. */
.share-modal { opacity: 0; transition: opacity 180ms ease; }
.share-modal.is-open { opacity: 1; }
.share-card { max-width: 420px; transform: translateY(10px); transition: transform 180ms ease; }
.share-modal.is-open .share-card { transform: none; }
.share-target { margin: -4px 0 16px; color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
.tool-heading--share { display: block; }
.tool-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-width: 0; margin-bottom: 8px; }
.tool-title-row h1 { min-width: 0; margin-bottom: 0; line-height: 1.2; }
.tool-heading--share > p { margin-bottom: 0; }
.tool-share-button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 3px 8px; border-radius: 8px; font-size: 0.75rem; line-height: 1.2; transform: translateY(-4px); }
@media (max-width: 575px) {
  .tool-title-row { gap: 7px 9px; }
  .tool-share-button { min-height: 28px; padding: 3px 7px; font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .share-modal, .share-card { transition: none; }
}

/* 서비스 그리드: 가운데 정렬(마지막 줄도 균형). 모바일 3열 / 데스크톱 4열 자연 배치. */
.share-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 12px; margin-bottom: 18px; }
.share-item {
  flex: 0 0 74px; display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer; color: var(--text); font-size: 0.72rem;
  text-align: center; border-radius: 12px; padding: 4px 2px;
}
.share-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.share-name { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-ic {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.25rem;
}
.share-ic svg { width: 26px; height: 26px; }
.share-item:hover .share-ic { filter: brightness(0.95); }

/* 서비스별 브랜드 색 */
.share-ic--kakao { background: #fee500; color: #191600; }
.share-ic--copy { background: var(--brand); }
.share-ic--x { background: #000000; }
.share-ic--facebook { background: #1877f2; }
.share-ic--email { background: #64748b; }
.share-ic--native { background: #334155; }
.share-ic--linkedin { background: #0a66c2; }
.share-ic--threads { background: #000000; }
.share-ic--line { background: #06c755; }

/* 링크 복사 영역: read-only + 말줄임 */
.share-copy { display: flex; gap: 8px; }
.share-url {
  flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; background: var(--soft); color: var(--muted); font: inherit;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.share-copy .btn-solid { flex: 0 0 auto; }

/* 다크 모드: X/Threads 검정 아이콘은 옅은 테두리로 배경과 구분 */
[data-theme="dark"] .share-ic--x,
[data-theme="dark"] .share-ic--threads { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }