/* ===============================
   Analysis - Modern Glass Style
   =============================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap');

/* ------- CSS Variables (Theme) ------- */
:root{
  --violet-700:#6900B8;   /* 진보라 (포인트) */
  --violet-500:#A177DB;   /* 중보라 (그라데이션/호버) */
  --violet-200:#D9B3FF;   /* 연보라 (배경/서브) */
  --ink-900:#1f1f29;
  --ink-700:#2e2e2e;
  --ink-500:#494b57;
  --surface:#ffffff;
  --bg-grad-from:#faf9fc;
  --bg-grad-to:#f3ecff;
  --shadow:0 10px 24px rgba(105,0,184,.08);
  --shadow-lg:0 16px 40px rgba(105,0,184,.16);
}

/* ------- Base ------- */
html, body{
  font-family:'Noto Sans KR','Roboto',sans-serif !important;
  color:var(--ink-700);
  background-color:#ffffff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body{ margin-bottom:60px; }

/* h2 기본 높이 정도(페이지 폰트 기준 40~48px)로 스페이서 설정 */
.title-spacer { height: 44px; }

/* ------- Headings / subtitles ------- */
h2,h3,h4,h5{ color:var(--ink-900); font-weight:700; letter-spacing:.2px; }
.page-subtitle-accent{ color:var(--violet-700); font-weight:700; }

/* ===============================
   Buttons (Year selector)
   =============================== */
.year-btn{
  border:1.6px solid var(--violet-700) !important;
  color:var(--violet-700) !important;
  background:#fff !important;
  border-radius:12px;
  padding:6px 16px;
  margin:4px;
  font-weight:500;
  transition:all .2s ease;
}
.year-btn:hover{
  background:rgba(105,0,184,.08) !important;
  box-shadow:0 0 0 .14rem rgba(105,0,184,.18) !important;
}
.year-btn.active,
.year-btn[aria-pressed="true"]{
  background: linear-gradient(135deg,var(--violet-700),var(--violet-500)) !important;
  color:#fff !important;
  border-color:var(--violet-700) !important;
  box-shadow:0 6px 16px rgba(105,0,184,.28) !important;
}
.year-btn:focus,
.year-btn:focus-visible,
.year-btn:active:focus{
  outline:none !important;
  box-shadow:0 0 0 .25rem rgba(105,0,184,.28) !important;
}

/* ===============================
   Cards (Glassmorphism)
   =============================== */
.card{
  border-radius:16px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.38);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }

.card-body{ min-height:400px; padding:18px; }

/* ===============================
   Section Headers (마이페이지 스타일)
   =============================== */

/* 1) 기존 bg-primary / bg-success를 흰 배경으로 리셋 */
.card .card-header.bg-primary,
.card .card-header.bg-success{
  background:#fff !important;
  color:var(--ink-900) !important;
  border-bottom:none !important;
}

/* 2) 공통 섹션 헤더 */
.card .card-header{
  background:#fff;
  border:none;
  padding:14px 16px 10px;
}

/* 3) 제목과 보라 그라데이션 밑줄 */
.card .card-header h4,
.card .card-header h5{
  margin:0;
  color:#1f1f29 !important;
  font-weight:700;
  position:relative;
}
.card .card-header h4::after,
.card .card-header h5::after{
  content:"";
  display:block;
  height:3px;
  margin-top:10px;
  border-radius:999px;
  background:linear-gradient(90deg,#7e2bdc 0%, #d2b5ff 60%, rgba(0,0,0,0) 100%);
}

/* ===============================
   Ranking list (Top10)
   =============================== */
.list-group-item.rank-item{
  background:transparent;
  border:none;
  border-bottom:1px solid #efe8ff;
  display:grid;
  grid-template-columns:64px 1fr 82px;
  align-items:center;
  padding:12px 10px;
}
.list-group-item.rank-item:last-child{ border-bottom:none; }

.rank-left strong{ color:var(--violet-700); }
.rank-center{ text-align:center; }
.rank-right{ justify-self:end; }

/* 링크 효과 */
.rank-center .rank-link{
  position:relative; display:inline-block;
  color:#212529; text-decoration:none;
  transition:color .15s ease, transform .15s ease;
}
.rank-center .rank-link::after{
  content:""; position:absolute; left:50%; bottom:-2px;
  width:0; height:2px; background:var(--violet-500);
  transform:translateX(-50%); transition:width .2s ease;
}
.rank-center .rank-link:hover{
  color:var(--violet-700); transform:translateY(-1px);
}
.rank-center .rank-link:hover::after{ width:100%; }

/* 배지 */
.badge.bg-primary{
  background: linear-gradient(135deg,var(--violet-500),var(--violet-700)) !important;
  color:#fff !important;
  border-radius:10px; padding:4px 10px;
  font-weight:600; font-size:.85rem;
}

/* 랭킹 카드 내부 배경을 은은한 연보라로 */
.card .list-group{
  background:#fff;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(105,0,184,.06);
  padding:4px 0;
}

/* ===============================
   Charts
   =============================== */
.card .chart-title{ margin:0; font-weight:700; }
.card-body canvas{ width:100% !important; }

/* ===============================
   Wordcloud / Analysis box
   =============================== */
#wordcloud-svg{
  width:100%; height:100%;
  background:#ffffff;          /* ✅ 순백 배경 */
  border:1px solid #eeeeee;    /* (선택) 아주 약한 테두리 */
  border-radius:12px;
}


/* Analysis box */
.analysis-box{
  border:1.5px solid var(--violet-200) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.86);
  box-shadow:var(--shadow);
}
#analysisToggle{
  background: linear-gradient(135deg,var(--violet-500),var(--violet-700)) !important;
  color:#fff !important; border:none; border-radius:10px;
  padding:10px 18px; font-weight:600;
  box-shadow:0 8px 18px rgba(105,0,184,.22);
}
#analysisResult{
  background:#fff; border-radius:10px;
  border:1px solid #eee; line-height:1.6;
}

/* ===============================
   Utilities
   =============================== */
.text-violet{ color:var(--violet-700) !important; }
.bg-soft-violet{ background:rgba(217,179,255,.30) !important; }
.border-violet{ border-color:var(--violet-200) !important; }

/* ===============================
   Responsive tweaks
   =============================== */
@media (max-width: 992px){
  .card-body{ min-height:auto; }
  .list-group-item.rank-item{ grid-template-columns:56px 1fr 72px; }
}
@media (max-width: 576px){
  .year-btn{ padding:6px 12px; font-size:.92rem; }
  .list-group-item.rank-item{ grid-template-columns:48px 1fr 64px; }
}

/* === Ranking colors to black (#000000) === */
.list-group-item.rank-item .rank-left strong{
  color:#000000 !important;
}

/* 가운데 항목 링크도 검정으로(원하면 유지해도 OK) */
.list-group-item.rank-item .rank-center .rank-link{
  color:#000000 !important;
}
.list-group-item.rank-item .rank-center .rank-link:hover{
  color:#000000 !important;   /* 살짝만 어둡게 */
}

/* === Rank-right 배지: 검정 글씨 + 보라 배경 === */
.list-group-item.rank-item .rank-right{
  color:#000000 !important;                            /* 글씨: 검정 */
  background: var(--violet-200) !important;
  border: none !important;
  box-shadow:none !important;
}

/* .badge.bg-primary가 우선될 때도 강제 적용 */
.badge.bg-primary.rank-right{
  color:#000000 !important;
  background: var(--violet-200) !important;
  border:none !important;
  box-shadow:none !important;
}