/* 명예의 전당 / 출석부 전용 */

/* 알약 탭 (role="tab" 선택 상태) */
.pills [role="tab"][aria-selected="true"] { background: var(--primary); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 0 0 3px rgba(139,92,246,.14); }

.table .num { text-align: right; white-space: nowrap; }

/* ---------- 명예의 전당 ---------- */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); align-items: end; }
.podium__item { --medal: var(--text-sub); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-5) var(--sp-4); min-width: 0; text-align: center; border-color: color-mix(in srgb, var(--medal) 40%, transparent); }
.podium__item b { max-width: 100%; }
.podium__item--1 { --medal: #E3B35C; min-height: 210px; }
.podium__item--2 { --medal: #C4C7CE; min-height: 180px; }
.podium__item--3 { --medal: #C98A5A; min-height: 160px; }
.podium__no { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1; color: var(--medal); }
.podium__avatar { width: 56px; height: 56px; font-size: 20px; box-shadow: 0 0 0 3px var(--medal); }
.podium__score { font-weight: 800; color: var(--medal); }

.rank-table { min-width: 460px; }
.rank-table__no { width: 60px; font-weight: 800; color: var(--muted); }
.rank-table__score { font-weight: 700; }
.rank-table .avatar { width: var(--icon-size); height: var(--icon-size); }
.rank-table .user { color: var(--text); }
.rank-table tr.is-me { background: rgba(139,92,246,.12); }

.title-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.title-chip { align-self: flex-start; color: #E3B35C; border-color: rgba(227,179,92,.6); }
.title-card__name { font-size: 17px; color: var(--text-strong); }

@media (max-width: 640px) {
  .podium { gap: var(--sp-2); }
  .podium__item { padding: var(--sp-4) var(--sp-2); font-size: 13px; }
  .podium__item--1 { min-height: 180px; }
  .podium__item--2 { min-height: 156px; }
  .podium__item--3 { min-height: 140px; }
  .podium__no { font-size: 22px; }
  .podium__avatar { width: 44px; height: 44px; font-size: 16px; }
}

/* ---------- 출석부 ---------- */
.att-layout { grid-template-columns: minmax(0, 1fr) 380px; align-items: stretch; }
/* 오른쪽 칸은 왼쪽(달력 + 도장 칸) 높이에 맞춤: contain: size 로 자기 높이를 줄 높이 계산에서 빼고,
   넘치는 '오늘 출석한 모험가' 목록은 그 칸 안에서만 스크롤 (스크롤줄은 숨김 · 휠 · 터치로 넘김) */
.att-layout > .aside { contain: size; }
.att-today { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.att-today .att-list { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; border-radius: var(--radius-sm); }
.att-today .att-list::-webkit-scrollbar { display: none; }
.att-today .att-list:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--focus-rgb), .45); }
.cal-nav { width: 36px; height: 36px; font-size: 18px; }
.cal-month { font-size: 20px; color: var(--text-strong); }
.att-streak { color: var(--pink); }

.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); }
.cal-dow { text-align: center; font-size: 12px; color: var(--muted); }
.cal-dow--sun { color: #E07A7A; }
.cal-day { height: 84px; padding: var(--sp-2); display: flex; flex-direction: column; justify-content: space-between; min-width: 0; font-size: 13px; background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius); }
.cal-day.is-today { background: rgba(139,92,246,.25); border-color: #A78BFA; }
.cal-day__no--sun { color: #E07A7A; }
.cal-day__no--sat { color: var(--accent); }
.cal-day__today { align-self: center; font-size: 12px; font-weight: 700; color: var(--accent); }
/* 도장: 칸 가운데에 겹쳐 찍힘 */
.cal-day { position: relative; }
.stamp { position: absolute; left: 50%; top: 56%; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid var(--pink); color: var(--pink); font-weight: var(--fw-heavy); font-size: var(--fs-lg); transform: translate(-50%, -50%) rotate(-12deg); pointer-events: none; }
.cal-dow--sat { color: var(--accent); }
.cal-day.is-future .cal-day__no { color: var(--muted); }
.cal-nav.is-disabled { opacity: .35; pointer-events: none; }
.cal-day.is-replay { cursor: pointer; }
.cal-day.is-replay:hover .stamp { filter: brightness(1.2); }
.cal-day.is-replay:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 방금 찍은 도장 (attendance.js): 높이서 크게 떨어져 쾅 (0.13초에 닿음) → 찌그러졌다 튕김 · 잉크 두 겹 번짐 · 잉크 방울 · 칸 번쩍 · 달력 흔들림 */
.stamp--drop { z-index: 2; animation: att-stamp .45s both; }
.stamp--drop::before, .stamp--drop::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none; }
.stamp--drop::before { z-index: -1; background: radial-gradient(circle, color-mix(in srgb, var(--pink) 50%, transparent) 0 45%, transparent 70%); animation: att-blot .55s .13s ease-out both; }
.stamp--drop::after { border: 2px solid var(--pink); animation: att-ink .7s .13s ease-out both; }
.cal-day.is-stamped { position: relative; animation: att-press .34s .13s ease-out; }
.cal.is-shake { animation: att-shake .3s .13s linear; }
.att-spark { position: absolute; left: 50%; top: 56%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--pink); pointer-events: none; z-index: 3; animation: att-spark .55s ease-out forwards; }
@keyframes att-stamp {
  0% { opacity: 0; transform: translate(-50%, -50%) translateY(-50px) scale(2.2) rotate(-26deg); filter: blur(1px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  18% { opacity: .9; filter: blur(0); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(.9, .85) rotate(-10deg); animation-timing-function: ease-out; }
  48% { transform: translate(-50%, -50%) scale(1.06) rotate(-12.5deg); }
  68% { transform: translate(-50%, -50%) scale(.98) rotate(-12deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-12deg); }
}
@keyframes att-blot { from { opacity: .6; transform: scale(.7); } to { opacity: 0; transform: scale(1.7); } }
@keyframes att-ink { from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
@keyframes att-press {
  0% { transform: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--pink) 70%, transparent); }
  25% { transform: translateY(2px) scale(.98); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 35%, transparent), 0 0 14px color-mix(in srgb, var(--pink) 40%, transparent); }
  100% { transform: none; box-shadow: 0 0 0 8px transparent; }
}
@keyframes att-shake {
  0%, 100% { transform: none; }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, 0); }
}
@keyframes att-spark {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); }
}
/* 단계 도장 (attendance.js · AttendanceController.Cell.stampClass): 어려울수록 화려하게
   m1 = 첫 연속 보상 날(7일) 금 도장 · m2 = 14일 더 큰 금 도장 · m3 = 30일 가장 큰 금 도장, first = 그날 1등 (왕관) */
.cal { position: relative; }
.stamp--m1, .stamp--m2, .stamp--m3, .stamp--first { color: var(--hof-gold); border-color: var(--hof-gold); background: radial-gradient(circle, rgba(var(--hof-gold-rgb), .18), transparent 70%); text-shadow: 0 0 8px rgba(var(--hof-gold-rgb), .55); box-shadow: 0 0 12px rgba(var(--hof-gold-rgb), .35); }
.stamp--m1 { border-style: double; border-width: 4px; }
.stamp--m2 { width: 64px; height: 64px; border-style: double; border-width: 5px; box-shadow: 0 0 16px rgba(var(--hof-gold-rgb), .5), inset 0 0 8px rgba(var(--hof-gold-rgb), .35); }
.stamp--m3 { width: 70px; height: 70px; border-style: double; border-width: 6px; color: var(--hof-gold-light); background: radial-gradient(circle, rgba(var(--hof-gold-rgb), .35), rgba(var(--hof-gold-rgb), .08) 65%, transparent 72%); box-shadow: 0 0 22px rgba(var(--hof-gold-rgb), .7), inset 0 0 12px rgba(var(--hof-gold-rgb), .45); }
.stamp--first { flex-direction: column; gap: 0; line-height: 1; }
.stamp__crown { width: 18px; height: 18px; margin-bottom: 1px; color: var(--hof-gold); filter: drop-shadow(0 0 4px rgba(var(--hof-gold-rgb), .8)); }
.stamp--drop.stamp--m1::before, .stamp--drop.stamp--m2::before, .stamp--drop.stamp--m3::before, .stamp--drop.stamp--first::before { background: radial-gradient(circle, rgba(var(--hof-gold-rgb), .65) 0 40%, transparent 70%); animation-duration: .8s; }
.stamp--drop.stamp--m1::after, .stamp--drop.stamp--m2::after, .stamp--drop.stamp--m3::after, .stamp--drop.stamp--first::after { border-color: var(--hof-gold); animation: att-ring .9s .13s ease-out both; }
.stamp--drop.stamp--m3::after { animation-duration: 1.3s; border-width: 3px; }
@keyframes att-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }
.att-spark--gold { background: var(--hof-gold); box-shadow: 0 0 6px rgba(var(--hof-gold-rgb), .9); }
.cal.is-shake--big { animation: att-shake .45s .13s linear 2; }
/* 한 줄(일~토) 다 찬 칸: 은은한 금색 테두리 · 밑줄 */
.cal-day.is-row-full { border-color: rgba(var(--hof-gold-rgb), .45); box-shadow: inset 0 -3px 0 rgba(var(--hof-gold-rgb), .55); }
/* 한 줄 완성 순간: 줄을 따라 왼 → 오 빛줄기 */
.att-row-sweep { position: absolute; z-index: 4; border-radius: var(--radius); background: linear-gradient(100deg, transparent 0 35%, rgba(var(--hof-gold-light-rgb), .55) 48%, rgba(var(--hof-gold-rgb), .25) 54%, transparent 66%) no-repeat; background-size: 300% 100%; background-position: 120% 0; pointer-events: none; animation: att-sweep 1.1s ease-in-out both; }
@keyframes att-sweep { to { background-position: -20% 0; } }
/* 색종이 (14일: 칸 둘레 · 30일: 화면 전체) */
.att-confetti { position: absolute; inset: 0; z-index: 5; overflow: visible; pointer-events: none; }
.att-confetti--wide { position: fixed; z-index: var(--z-fx); overflow: hidden; }
.att-confetti i { position: absolute; top: 50%; left: var(--x); width: 7px; height: 11px; border-radius: 2px; opacity: 0; animation: att-burst var(--d) cubic-bezier(.2, .7, .4, 1) forwards; }
.att-confetti--wide i { top: -12px; width: 9px; height: 14px; animation-name: att-fall; animation-timing-function: linear; }
@keyframes att-burst { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), 90px) rotate(var(--r)); } }
@keyframes att-fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), 105vh) rotate(var(--r)); } }
/* 띠 문구: 달력 위 가운데 (30일은 화면 가운데 큰 띠) */
.att-banner { position: absolute; left: 50%; top: 42%; z-index: 6; padding: var(--sp-2) var(--sp-6); font-family: var(--hof-font); font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--hof-ink); white-space: nowrap; background: linear-gradient(180deg, var(--hof-gold-light), var(--hof-gold) 55%, var(--hof-gold-deep)); border-radius: var(--radius-sm); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .7), 0 0 24px rgba(var(--hof-gold-rgb), .55); transform: translate(-50%, -50%); pointer-events: none; animation: att-banner 2.4s ease both; }
.att-banner--big { position: fixed; top: 45%; z-index: calc(var(--z-fx) + 1); padding: var(--sp-4) var(--sp-12); font-size: var(--fs-4xl); letter-spacing: .04em; animation-duration: 3.4s; }
@keyframes att-banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 20%, 82% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }
.att-list li.is-new { animation: att-new .5s ease-out both; }
@keyframes att-new { from { opacity: 0; transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) {
  .stamp--drop, .cal-day.is-stamped, .cal.is-shake, .att-list li.is-new { animation: none; }
  .stamp--drop::before, .stamp--drop::after, .att-spark { display: none; }
  .cal.is-shake--big, .att-row-sweep, .att-confetti i { animation: none; }
  .att-banner { animation: none; opacity: 1; } /* 움직임 없이 띠 문구 · 금색만 */
}
.att-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.att-done b { color: var(--text-strong); }
.att-empty { margin: var(--sp-3) 0 0; }

.att-form { display: flex; gap: var(--sp-3); align-items: center; }
.att-form .input { flex: 1; min-width: 0; }
.att-form .btn { flex-shrink: 0; }

.att-reward { margin-top: var(--sp-2); }
.att-reward td { padding-inline: 0; }
.att-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.att-list li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-size: 14px; min-width: 0; }
.att-list li:last-child { border-bottom: 0; }
.att-list__no { width: 24px; flex-shrink: 0; color: var(--muted); }
.att-list__no--first { color: #E3B35C; }
.att-list__name { flex-shrink: 0; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-list__say { flex: 1; min-width: 0; color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1024px) {
  .att-layout { grid-template-columns: minmax(0, 1fr); }
  .att-layout > .aside { contain: none; } /* 한 줄로 쌓이면 높이를 맞출 왼쪽 칸이 없음 → 목록 높이만 묶음 */
  .att-today .att-list { max-height: 330px; overscroll-behavior: auto; } /* 5.5줄: 반쯤 잘린 줄로 더 있음을 알림 · 끝에 닿으면 페이지가 이어서 스크롤 */
}
@media (max-width: 640px) {
  .cal { gap: var(--sp-1); }
  .cal-day { height: 60px; padding: var(--sp-1); font-size: 12px; border-radius: var(--radius-sm); }
  .stamp { width: 40px; height: 40px; font-size: var(--fs-2xs); border-width: 2px; }
  .stamp--m2, .stamp--m3 { width: 46px; height: 46px; border-width: 3px; }
  .stamp__crown { width: 12px; height: 12px; }
  .att-banner { font-size: var(--fs-lg); }
  .att-banner--big { font-size: var(--fs-2xl); padding: var(--sp-3) var(--sp-6); }
  .cal-day__today { font-size: 11px; }
}
@media (max-width: 480px) {
  .att-form { flex-direction: column; align-items: stretch; }
  .cal-day { height: 52px; }
  .stamp { width: 32px; height: 32px; font-size: var(--fs-2xs); letter-spacing: -.02em; border-width: 1.5px; }
}