/* 오늘의 코인 타로 (fortune.html). 공통 틀은 styles.css·learn/learn.css를 쓰고, 여기에는 동전과 결과만 둔다 */
.fortune { padding: 48px 0 0; text-align: center; }
.fortune h1 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 800; letter-spacing: -0.035em; }
.ft-date { font-size: 14px; font-weight: 700; color: var(--brand); }
.ft-sub { margin-top: 10px; font-size: 16px; color: var(--text-3); }

/* 금화 다섯 개: 누르면 세로축으로 뒤집힌다. 금화 그림은 coin.js */
.ft-coins { display: flex; justify-content: center; gap: clamp(8px, 2.4vw, 22px); margin: 40px auto 0; perspective: 900px; }
.ft-coin { --size: clamp(58px, 15vw, 128px); width: var(--size); height: var(--size); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  filter: drop-shadow(0 6px 10px rgba(80, 52, 6, .28)); transition: transform .25s ease, opacity .4s ease, filter .4s ease; }
.ft-coin:hover:not(:disabled) { transform: translateY(-6px); }
.ft-coin:focus-visible { outline: 3px solid var(--brand); outline-offset: 6px; }
.ft-coin:disabled { cursor: default; }
.ft-coin.is-dim { opacity: .45; filter: grayscale(.4) drop-shadow(0 6px 10px rgba(80, 52, 6, .28)); }
.ft-coin-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.2, .7, .2, 1); }
.ft-coin.is-flipped .ft-coin-in { transform: rotateY(180deg); }
/* 그림자는 버튼(.ft-coin)에 건다. 뒤집히는 면에 filter를 걸면 크롬에서 뒷면 숨김이 풀려 앞면 대신 뒷면이 보일 수 있다 */
.ft-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ft-face svg { display: block; width: 100%; height: 100%; }
.ft-front { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) { .ft-coin, .ft-coin-in { transition: none; } }

/* 결과 */
.ft-result { max-width: 620px; margin: 40px auto 0; text-align: left; outline: none; }
.ft-grade { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ft-grade span { padding: 4px 12px; border-radius: 8px; background: var(--g); color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.ft-grade b { font-size: 28px; font-weight: 800; color: var(--g); }
.ft-grade.g0 { --g: #0F6B3A; } .ft-grade.g1 { --g: #15803D; } .ft-grade.g2 { --g: #4E5968; } .ft-grade.g3 { --g: #B45309; } .ft-grade.g4 { --g: #C42B2B; }
.ft-msg { margin-top: 18px; font-size: 17px; line-height: 1.75; color: var(--text); }
.ft-lucky { display: grid; gap: 4px; margin-top: 22px; padding: 16px 18px; border: 1px solid var(--border); border-left: 4px solid #191F28; border-radius: 10px; }
.ft-lucky span { font-size: 13px; font-weight: 700; color: var(--text-3); }
.ft-lucky strong { font-size: 22px; font-weight: 800; }
.ft-lucky small { font-size: 13px; color: var(--text-3); }
.ft-next { margin-top: 14px; font-size: 14px; color: var(--text-3); text-align: center; }
.ft-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.fortune .learn-split { margin-top: 56px; }
.fortune .disclaim { text-align: center; }
@media (max-width: 600px) {
  .fortune { padding-top: 32px; }
  .ft-coins { margin-top: 28px; }
  .ft-actions .btn { flex: 1 1 100%; }
  .ft-grade b { font-size: 24px; }
}