/* ───────────────────────────────────────────────
   SellCopy 커스텀 스타일 — Tailwind 보완용 최소 CSS
   ─────────────────────────────────────────────── */

/* 부드러운 스크롤 (랜딩 앵커 이동) */
html {
  scroll-behavior: smooth;
}

/* 한글 줄바꿈 — 글자 단위가 아니라 '어절(띄어쓰기)' 단위로만 끊는다.
   모바일에서 "카피라이팅" → "카피 / 라이팅", "추출기" → "추 / 출기"처럼
   단어 중간이 잘려 아래로 내려가는 문제를 전역으로 해결.
   overflow-wrap로 화면보다 긴 단어(URL 등)만 예외적으로 끊어 넘침 방지. */
body {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 제목: 여러 줄일 때 줄 길이를 균형 있게 → 마지막 줄에 한 단어만 떨어지는 어색함 방지
   (토스·네이버 등 한글 사이트 관행) */
h1, h2, h3 {
  text-wrap: balance;
}
/* 본문 단락: 고아 단어(orphan) 완화로 더 자연스러운 줄바꿈 */
p, li {
  text-wrap: pretty;
}

/* 스켈레톤 로딩 애니메이션 */
.skeleton {
  background: linear-gradient(
    90deg,
    #eef2f6 25%,
    #e2e8f0 37%,
    #eef2f6 63%
  );
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* 결과 본문(마크다운 → HTML) 타이포 */
.copy-body {
  font-size: 0.9rem;
  line-height: 1.75;
  color: #334155;
  white-space: pre-wrap;
  word-break: break-word;
}
.copy-body strong { color: #0f172a; font-weight: 700; }
.copy-body h1, .copy-body h2, .copy-body h3 {
  font-weight: 700;
  color: #0f172a;
  margin: 0.9em 0 0.3em;
}

/* 잠금(블러) 태그 — Free 결제 유도 핵심 치트키 */
.locked-blur {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}

/* 토스트 등장 애니메이션 */
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
#toast:not(.hidden) {
  animation: toast-in 0.2s ease;
}

/* 결과 카드 등장 */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.result-card {
  animation: fade-up 0.3s ease both;
}

/* details(아코디언) 기본 마커 제거 */
summary::-webkit-details-marker { display: none; }

/* 탭 생성 완료 표시(●) — 어떤 탭에 결과가 캐시됐는지 한눈에 */
.mode-tab { position: relative; }
.mode-tab.has-result::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #16a34a;
}