/* ==========================================================================
   english-fortune-today — 이 툴만의 스타일

   공통 패턴(.tool-shell · .button · .result-panel · .empty-state · .steps ·
   .faq-list)은 css/common.css 를 그대로 씁니다. 여기에는 "오늘의 카드"라는
   이 툴의 도메인 모양만 둡니다.

   🔴 인라인 style 속성은 CSP 로 막혀 있습니다. 상태는 data-* 로 넘기고
      색은 아래 [data-mood] 규칙이 받습니다.
   ========================================================================== */

/* --- 상단 고정 고지 --------------------------------------------------------
   🔴 심사 조건입니다. 결과가 나오기 전에도 늘 보여야 합니다. */
.fortune-disclaimer {
  max-width: var(--reading);
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.fortune-disclaimer__line {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.fortune-disclaimer__line + .fortune-disclaimer__line {
  margin-top: var(--space-2);
}

.fortune-disclaimer__line strong {
  color: var(--color-text);
}

.field-label__optional {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
}

.field-hint code,
.prose code,
.fortune-source code {
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  font-size: 0.95em;
}

/* --- 오늘의 카드 -----------------------------------------------------------
   🔴 기운 6단계의 색은 **데이터 색**입니다. UI 토큰(--color-primary 등)을
      빌려 쓰지 않습니다. 접근성 때문에 UI 토큰을 바꾸면 기운의 의미까지
      같이 바뀌기 때문입니다(STYLE.md).
      모든 ink 는 자기 tint 위에서 5.8:1 이상, 흰 배경에서 6.3:1 이상입니다. */
.fortune-card {
  --fortune-tint: #E8F0F7;
  --fortune-ink: #1F4E6B;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.fortune-card[data-mood="0"] { --fortune-tint: #E8F0F7; --fortune-ink: #1F4E6B; }
.fortune-card[data-mood="1"] { --fortune-tint: #E7EEFB; --fortune-ink: #274A9E; }
.fortune-card[data-mood="2"] { --fortune-tint: #FBEDE7; --fortune-ink: #8A4222; }
.fortune-card[data-mood="3"] { --fortune-tint: #F2EAF9; --fortune-ink: #6A3B96; }
.fortune-card[data-mood="4"] { --fortune-tint: #E7F2EA; --fortune-ink: #1F6340; }
.fortune-card[data-mood="5"] { --fortune-tint: #FAF0DF; --fortune-ink: #7A5310; }

.fortune-card__head {
  padding: var(--space-4) clamp(16px, 4vw, 32px);
  background: var(--fortune-tint);
}

.fortune-card__date {
  margin: 0;
  color: var(--fortune-ink);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

.fortune-card__moodname {
  display: block;
  margin-top: var(--space-1);
  color: var(--fortune-ink);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1.3;
}

.fortune-card__moodline {
  margin: var(--space-1) 0 0;
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1.6;
}

.fortune-card__body {
  padding: clamp(20px, 4vw, 32px);
}

.fortune-card__label {
  margin: 0 0 var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

.fortune-card__sentence {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: clamp(24px, 5.4vw, 32px);
  font-weight: var(--weight-bold);
  line-height: 1.35;
}

.fortune-card__pron {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.fortune-card__meaning {
  margin: var(--space-3) 0 0;
  font-size: var(--text-md);
  line-height: 1.6;
}

.fortune-card__divider {
  height: 1px;
  margin: var(--space-5) 0;
  border: 0;
  background: var(--color-border);
}

.fortune-card__words {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  grid-template-columns: minmax(0, 1fr);
}

.fortune-word {
  display: grid;
  gap: 2px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--fortune-tint);
}

.fortune-word__en {
  overflow-wrap: anywhere;
  color: var(--fortune-ink);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.fortune-word__ko {
  color: var(--color-text);
  font-size: var(--text-sm);
}

.fortune-card__foot {
  padding: var(--space-3) clamp(16px, 4vw, 32px) var(--space-4);
  border-top: 1px solid var(--color-border);
}

.fortune-card__notice {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  line-height: 1.6;
}

.fortune-card__brand {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
}

/* 무엇을 근거로 뽑았는지 알려 주는 줄. 성공 문구(.copy-feedback)와 구분하려고
   초록이 아니라 보조 본문색을 씁니다. 안내와 성공은 다른 이야기입니다. */
.fortune-basis {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* --- 카드 아래 조작 줄 ------------------------------------------------------ */
.fortune-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.fortune-actions .button {
  flex: 1 1 150px;
  min-height: 48px;
}

/* 주의 문구는 성공 문구(.copy-feedback)와 색을 나눕니다.
   둘이 같은 색이면 "저장이 막혔다"는 안내가 성공처럼 읽힙니다. */
.fortune-warning {
  margin: var(--space-2) 0 0;
  color: var(--color-warning);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.fortune-warning:empty {
  margin: 0;
}

/* --- 길게 눌러 저장할 그림 -------------------------------------------------- */
.fortune-image {
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  text-align: center;
}

.fortune-image img {
  width: min(100%, 320px);
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

.fortune-image figcaption {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* --- 복사용 문구 상자 ------------------------------------------------------- */
.fortune-textarea-label {
  margin-top: var(--space-5);
}

.fortune-textarea {
  font-size: var(--text-sm);
  line-height: 1.7;
  resize: vertical;
}

/* --- 함께 쓰면 좋은 도구 ---------------------------------------------------- */
.fortune-related {
  max-width: var(--reading);
  margin-bottom: var(--space-7);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.fortune-related__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
}

.fortune-related__list {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.fortune-related__list li + li {
  margin-top: var(--space-2);
}

.fortune-source {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* --- 넓은 화면 -------------------------------------------------------------- */
@media (min-width: 560px) {
  .fortune-card__words {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}