/* ============================================================
   토닥 오늘의 운세 (/fortune)  @author 정경하 @since 2026.06.11
   - 따뜻한 토닥 테마(--primary/--accent/--bg) + 신비로운 무드
   - 생년월일·시간 입력 → 총운/세부운/행운 (비회원 차등)
   Copyright Neosgen Co,Ltd.
   ============================================================ */
.ft-wrap { max-width: 760px; margin: 0 auto; padding: 0 16px 72px; }

/* HERO */
.ft-hero {
  position: relative; overflow: hidden; text-align: center;
  margin: 0 -16px 30px; padding: 54px 20px 48px;
  background:
    radial-gradient(1200px 300px at 50% -120px, rgba(212,168,83,.28), transparent 70%),
    linear-gradient(160deg, #fbeecf 0%, var(--bg) 60%);
}
.ft-hero::before, .ft-hero::after {
  content: "✦"; position: absolute; color: var(--accent); opacity: .5; font-size: 14px;
  animation: ftTwinkle 3s ease-in-out infinite;
}
.ft-hero::before { top: 28px; left: 18%; }
.ft-hero::after  { top: 64px; right: 20%; font-size: 20px; animation-delay: 1.1s; }
@keyframes ftTwinkle { 0%,100%{ opacity:.25; transform:scale(.85);} 50%{ opacity:.85; transform:scale(1.15);} }
.ft-hero .moon { font-size: 2.6rem; display: block; margin-bottom: 8px; filter: drop-shadow(0 4px 10px rgba(212,168,83,.5)); }
.ft-hero h1 { font-size: 1.9rem; font-weight: 900; color: var(--primary); letter-spacing: -.5px; }
.ft-hero h1 em { color: var(--accent); font-style: normal; }
.ft-hero p { margin-top: 10px; color: #8a7a64; font-size: .95rem; line-height: 1.6; }

/* 공통 카드 */
.ft-card { background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); padding: 26px; }
.ft-card + .ft-card { margin-top: 18px; }

/* 입력 폼 */
.ft-form-title { font-weight: 800; color: var(--primary); font-size: 1.05rem; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.ft-field { margin-bottom: 16px; }
.ft-field > label { display: block; font-size: .85rem; font-weight: 700; color: #7a6a54; margin-bottom: 8px; }
.ft-seg { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 4px; gap: 4px; }
.ft-seg button { border: none; background: none; cursor: pointer; padding: 9px 18px; border-radius: 9px; font-weight: 700; font-size: .88rem; color: #8a7a64; transition: all .15s; }
.ft-seg button.on { background: linear-gradient(135deg, var(--accent), #c2974a); color: #fff; box-shadow: 0 4px 12px rgba(212,168,83,.35); }
.ft-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ft-input, .ft-select {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 14px; font-family: inherit; font-size: .95rem; color: var(--text); background: #fff;
}
.ft-input:focus, .ft-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212,168,83,.15); }
.ft-submit {
  width: 100%; margin-top: 8px; border: none; cursor: pointer; border-radius: 14px; padding: 16px;
  font-size: 1.02rem; font-weight: 800; color: #fff; letter-spacing: .3px;
  background: linear-gradient(135deg, var(--primary), #8a5230);
  box-shadow: 0 10px 26px rgba(107,58,31,.32); transition: transform .12s, box-shadow .12s;
}
.ft-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(107,58,31,.4); }
.ft-submit:active { transform: translateY(0); }
.ft-hint { text-align: center; font-size: .78rem; color: #aa9a84; margin-top: 12px; }

/* 결과 */
.ft-result { margin-top: 24px; display: none; }
.ft-result.show { display: block; animation: ftRise .5s ease; }
@keyframes ftRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

.ft-zodiac { display: flex; align-items: center; gap: 16px; }
.ft-zodiac .emoji { font-size: 3rem; line-height: 1; filter: drop-shadow(0 3px 8px rgba(0,0,0,.12)); }
.ft-zodiac .zt { font-size: 1.25rem; font-weight: 900; color: var(--primary); }
.ft-zodiac .zs { font-size: .85rem; color: #8a7a64; margin-top: 3px; }
.ft-chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ft-chip { background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 5px 13px; font-size: .8rem; font-weight: 700; color: var(--primary); }

/* 총운 */
.ft-total { text-align: center; padding: 8px 0 4px; }
.ft-total .label { font-size: .82rem; font-weight: 800; color: var(--accent); letter-spacing: 2px; }
.ft-total .score { font-size: 3.2rem; font-weight: 900; color: var(--primary); line-height: 1.05; margin: 4px 0; }
.ft-total .score small { font-size: 1.2rem; color: #b6a584; font-weight: 800; }
.ft-stars { font-size: 1.3rem; letter-spacing: 3px; color: var(--accent); }
.ft-stars .off { color: #e5d9c8; }
.ft-total .msg { margin-top: 14px; font-size: .98rem; line-height: 1.75; color: var(--text); }

/* 세부 운 */
.ft-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; }
.ft-cat { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
.ft-cat .ch { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.ft-cat .cn { font-weight: 800; color: var(--primary); font-size: .95rem; }
.ft-cat .cn i { color: var(--accent); margin-right: 5px; }
.ft-cat .cp { font-size: .82rem; font-weight: 800; color: var(--accent); }
.ft-bar { height: 8px; background: #ece0cc; border-radius: 6px; overflow: hidden; }
.ft-bar > span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--primary)); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.ft-cat .cmsg { margin-top: 10px; font-size: .83rem; line-height: 1.55; color: #6a5c48; }

/* 비회원 잠금 커버 — 공통 .guest-lock* 로 이동(style.css). 마크업은 common/guest-lock.jsp. */

/* 행운 아이템 */
.ft-lucky { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; }
.ft-lucky .it { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 14px 6px; }
.ft-lucky .it .k { font-size: .72rem; color: #9a8a74; font-weight: 700; }
.ft-lucky .it .v { font-size: 1.05rem; font-weight: 900; color: var(--primary); margin-top: 6px; }
.ft-lucky .it .dot { width: 26px; height: 26px; border-radius: 50%; margin: 6px auto 0; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); }

/* 상담사 CTA */
.ft-cta { text-align: center; background: linear-gradient(135deg, #fbeecf, var(--bg)); border: 1px solid var(--border); }
.ft-cta h3 { color: var(--primary); font-size: 1.1rem; font-weight: 900; }
.ft-cta p { color: #8a7a64; font-size: .9rem; margin: 8px 0 16px; line-height: 1.6; }
.ft-cta a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; background: linear-gradient(135deg, var(--accent), #c2974a); color: #fff; font-weight: 800; padding: 14px 28px; border-radius: 14px; box-shadow: 0 8px 22px rgba(212,168,83,.4); }

.ft-share { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.ft-share button { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 11px 20px; font-weight: 700; font-size: .86rem; color: var(--primary); }
.ft-share button:hover { background: var(--bg); }

@media (max-width: 560px) {
  .ft-row, .ft-cats { grid-template-columns: 1fr; }
  .ft-lucky { grid-template-columns: 1fr 1fr; }
  .ft-hero h1 { font-size: 1.6rem; }
}