/* ============================================================
   타로 달력 (내 뽑기 기록) 스타일
   ============================================================ */

/* 진입 버튼 (도감 옆, 청록 톤으로 구분) */
.cal-btn {
  background: linear-gradient(135deg, rgba(80,200,210,.20), rgba(120,80,200,.18));
  border: 1.5px solid rgba(80,200,210,.5);
  box-shadow: 0 0 18px rgba(80,200,210,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.cal-btn:hover {
  background: linear-gradient(135deg, rgba(80,200,210,.36), rgba(120,80,200,.3));
  border-color: rgba(80,200,210,.85);
  box-shadow: 0 0 30px rgba(80,200,210,.4), inset 0 1px 0 rgba(255,255,255,.12);
}

/* ── 달력 모달 ── */
.cal-modal {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(8,8,16,.72); backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s;
  overflow-y: auto; padding: 24px 14px 50px;
}
.cal-modal.open { opacity: 1; pointer-events: auto; }
.cal-sheet {
  width: 100%; max-width: 440px; margin: auto;
  background: radial-gradient(120% 90% at 50% 0%, #232142 0%, #16142a 60%, #100e1f 100%);
  border: 1px solid #3a3460; border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6); padding: 16px 16px 24px;
  transform: translateY(16px); transition: transform .3s;
}
.cal-modal.open .cal-sheet { transform: translateY(0); }

.cal-head { display: flex; align-items: center; justify-content: center; gap: 14px; position: relative; }
.cal-title { font-size: 18px; font-weight: 800; color: #f0eaff; letter-spacing: 1px; min-width: 92px; text-align: center; }
.cal-nav {
  background: rgba(255,255,255,.06); border: 1px solid #3a3460; color: #d8cffa;
  font-size: 18px; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; line-height: 1;
}
.cal-nav:active { transform: scale(.92); }
.cal-close {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #aaa1d6; font-size: 20px; cursor: pointer; padding: 4px;
}
.cal-sub { text-align: center; font-size: 12px; color: #9d93d4; margin: 7px 0 12px; letter-spacing: .04em; }

.cal-week { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; margin-bottom: 6px; }
.cal-week span { text-align: center; font-size: 11px; color: #8a82b6; }
.cal-week span:first-child { color: #ff8a8a; }
.cal-week span:last-child { color: #8ab4ff; }

.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; }
.cal-cell {
  position: relative; aspect-ratio: 3/4; border-radius: 8px;
  background-size: cover; background-position: center;
  background-color: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); overflow: hidden;
}
.cal-cell.empty { background: none; border: none; }
.cal-cell .cal-d { position: absolute; top: 3px; left: 5px; font-size: 11px; color: #cfc6ee; z-index: 2; }
.cal-cell.has { cursor: pointer; border-color: rgba(120,200,210,.45); }
.cal-cell.has::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.5), transparent 55%);
}
.cal-cell.has .cal-d { color: #fff; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.cal-cell.has:active { transform: scale(.95); }
.cal-cell.today { box-shadow: inset 0 0 0 2px #ffd56b; }
.cal-cell .cal-dot {
  position: absolute; bottom: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%;
  background: #ffd56b; box-shadow: 0 0 6px #ffd56b; z-index: 2;
}

.cal-detail {
  display: none; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid #2c2747; text-align: left; gap: 12px; align-items: flex-start;
}
.cal-detail.show { display: flex; animation: calDetIn .3s ease; }
@keyframes calDetIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cal-det-img { width: 74px; height: 111px; border-radius: 9px; object-fit: cover; flex-shrink: 0; border: 1px solid #4a4280; }
.cal-det-info { flex: 1; min-width: 0; }
.cal-det-date { font-size: 12px; color: #9d93d4; }
.cal-det-name { font-size: 14px; font-weight: 700; color: #f0eaff; margin: 3px 0 6px; }
.cal-det-fortune { font-size: 12px; line-height: 1.55; color: #c6bcea; margin: 0; }