.attendance-page { width: 100%; max-width: none; margin: 34px 0 72px; }
.attendance-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-bottom: 16px; padding: 34px 38px; border-radius: 22px; color: #fff;
  background: radial-gradient(circle at 88% 18%, rgb(255 255 255 / 18%), transparent 22%), linear-gradient(120deg, #155b50, #218574 65%, #a5ba59);
  box-shadow: 0 16px 40px rgb(28 93 79 / 18%);
}
.attendance-eyebrow { display: block; margin-bottom: 8px; font-size: 10px; font-weight: 800; letter-spacing: .16em; opacity: .72; }
.attendance-hero h1 { margin: 0; font-size: clamp(25px, 4vw, 36px); line-height: 1.2; letter-spacing: -.04em; }
.attendance-hero p { margin: 10px 0 0; font-size: 14px; color: rgb(255 255 255 / 84%); }
.attendance-streak {
  width: 116px; height: 116px; display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid rgb(255 255 255 / 34%); border-radius: 50%; background: rgb(255 255 255 / 13%); backdrop-filter: blur(6px);
}
.attendance-streak > span { font-size: 22px; line-height: 1; }
.attendance-streak strong { margin-top: 2px; font-size: 34px; line-height: 1; }
.attendance-streak small { margin-top: 4px; font-size: 11px; opacity: .82; }
.attendance-login-link { display: inline-flex; align-items: center; gap: 8px; padding: 13px 16px; border: 1px solid rgb(255 255 255 / 40%); border-radius: 12px; color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; }
.attendance-login-link:hover { background: rgb(255 255 255 / 12%); color: #fff; }
.attendance-guest-note { margin: 16px 0; padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--muted-strong); font-size: 13px; }
.attendance-guest-calendar-note { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.attendance-currency-note { margin: -4px 2px 16px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.attendance-wallet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
.attendance-wallet__coin { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.attendance-wallet__icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 17px; font-weight: 900; box-shadow: inset 0 0 0 3px rgb(255 255 255 / 24%); }
.attendance-wallet__coin--dong .attendance-wallet__icon { color: #a86c3b; background: #f3dfc9; }
.attendance-wallet__coin--silver .attendance-wallet__icon { color: #66747d; background: #e8edf0; }
.attendance-wallet__coin--gold .attendance-wallet__icon { color: #9a741c; background: #f8e9ae; }
.attendance-wallet__coin small, .attendance-wallet__coin strong { display: block; }
.attendance-wallet__coin small { margin-bottom: 3px; color: var(--muted); font-size: 12px; }
.attendance-wallet__coin strong { font-size: 19px; line-height: 1.1; }
.attendance-page .panel { padding: 24px; border-radius: 18px; }
.attendance-checkin { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 22px; margin-bottom: 16px; border-color: rgb(33 133 116 / 28%); box-shadow: 0 8px 24px rgb(20 76 63 / 7%); }
.attendance-checkin__date { display: flex; align-items: center; gap: 12px; }
.attendance-checkin__calendar { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border-radius: 14px; background: var(--accent-tint); font-size: 23px; }
.attendance-checkin h2, .attendance-section-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.025em; }
.attendance-checkin__date p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.attendance-checkin__reward { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px 10px; max-width: 310px; font-size: 12px; }
.attendance-checkin__reward strong { flex-basis: 100%; text-align: center; color: var(--accent); font-size: 13px; }
.attendance-checkin__button { min-width: 176px; min-height: 48px; white-space: nowrap; }
.attendance-checkin__button:disabled { cursor: default; opacity: .7; }
.attendance-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.attendance-section-heading .attendance-eyebrow { margin-bottom: 5px; color: var(--accent); opacity: 1; }
.attendance-section-heading > p, .attendance-calendar__count { margin: 0; color: var(--muted); font-size: 12px; }
.attendance-rewards { margin-bottom: 16px; }
.attendance-reward-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; }
.attendance-reward-card { position: relative; min-height: 102px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-sunk); text-align: center; }
.attendance-reward-card.is-next { border: 2px solid var(--accent); background: var(--accent-tint); box-shadow: 0 5px 14px rgb(23 103 89 / 12%); }
.attendance-reward-card.is-claimed { border-color: #a5bc5f; background: linear-gradient(155deg, var(--surface), rgb(165 188 95 / 15%)); }
.attendance-reward-card.is-next.is-claimed { border: 2px solid var(--accent); background: var(--accent-tint); }
.attendance-reward-card__day { font-size: 12px; font-weight: 800; }
.attendance-reward-card__coins { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 7px; font-size: 11px; font-weight: 700; }
.attendance-reward-card__check { position: absolute; top: 7px; right: 8px; color: #477e42; font-size: 13px; font-weight: 900; }
.attendance-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.attendance-calendar__weekday { padding: 5px 0 9px; color: var(--muted); text-align: center; font-size: 11px; font-weight: 800; }
.attendance-calendar__day { position: relative; min-height: 54px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 11px; color: var(--ink); font-size: 13px; }
.attendance-calendar__day.is-outside { color: var(--muted); opacity: .38; }
.attendance-calendar__day.is-checked { background: rgb(165 188 95 / 17%); color: #397146; font-weight: 800; }
.attendance-calendar__day.is-checked > span:first-child { position: relative; z-index: 2; color: #17472b; -webkit-text-stroke: 1px rgb(244 251 238 / 92%); text-shadow: 0 0 3px rgb(244 251 238 / 95%); }
.attendance-calendar__day.is-today { border-color: var(--accent); }
.attendance-calendar__stamp {
  position: absolute; z-index: 1; top: 50%; left: 50%; width: 42px; height: 42px; display: grid; place-items: center;
  border: 2px solid rgb(37 131 75 / 82%); border-radius: 50%; background: rgb(229 246 226 / 22%);
  color: #25834b; box-shadow: 0 2px 4px rgb(31 88 49 / 24%), inset 0 0 0 1px rgb(255 255 255 / 32%);
  transform: translate(-50%, -50%) rotate(-14deg); animation: attendance-stamp-pop 440ms cubic-bezier(.2, 1.65, .42, 1) both;
}
.attendance-calendar__stamp svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes attendance-stamp-pop {
  0% { transform: translate(-50%, -50%) rotate(12deg) scale(2.2); opacity: 0; }
  72% { transform: translate(-50%, -50%) rotate(-17deg) scale(.88); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-14deg) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .attendance-calendar__stamp { animation: none; }
}

@media (max-width: 760px) {
  .attendance-page { margin: 22px auto 48px; }
  .attendance-hero { padding: 27px 24px; border-radius: 18px; }
  .attendance-streak { width: 90px; height: 90px; }
  .attendance-streak strong { font-size: 28px; }
  .attendance-checkin { grid-template-columns: 1fr auto; gap: 16px; }
  .attendance-checkin__reward { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; max-width: none; }
  .attendance-checkin__reward strong { flex-basis: auto; }
  .attendance-checkin form, .attendance-checkin__button { grid-column: 1 / -1; width: 100%; }
  .attendance-reward-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .attendance-hero { padding: 24px 18px; }
  .attendance-hero h1 { font-size: 25px; }
  .attendance-hero p { max-width: 215px; font-size: 12px; }
  .attendance-streak { width: 78px; height: 78px; }
  .attendance-streak > span { font-size: 18px; }
  .attendance-streak strong { font-size: 24px; }
  .attendance-streak small { font-size: 10px; }
  .attendance-wallet { gap: 7px; }
  .attendance-wallet__coin { flex-direction: column; align-items: flex-start; gap: 7px; padding: 11px; }
  .attendance-wallet__icon { width: 34px; height: 34px; font-size: 14px; }
  .attendance-wallet__coin strong { font-size: 16px; }
  .attendance-page .panel { padding: 17px 14px; }
  .attendance-checkin { grid-template-columns: 1fr; }
  .attendance-checkin__date { grid-column: 1; }
  .attendance-checkin__reward { grid-column: 1; grid-row: auto; }
  .attendance-checkin__reward strong { flex-basis: 100%; text-align: left; }
  .attendance-checkin form, .attendance-checkin__button { grid-column: 1; }
  .attendance-section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .attendance-reward-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attendance-reward-card { min-height: 82px; }
  .attendance-calendar__day { min-height: 43px; }
}

/* ---- 출석 개선: 진행 안내 · 보상 트랙 · 달력 이동/통계 · 출석 연출 ---- */
.attendance-progress { grid-column: 1 / -1; margin: -6px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--accent-tint); color: var(--accent-dark); font-size: 13px; font-weight: 700; }

/* 보상 트랙: 칸 뒤로 지나가는 선이 받은 일차까지 채워진다 */
.attendance-reward-grid { position: relative; isolation: isolate; }
.attendance-reward-grid::before, .attendance-reward-grid::after { content: ""; position: absolute; z-index: -1; top: 50%; left: calc(100% / 14); height: 4px; border-radius: 2px; transform: translateY(-50%); }
.attendance-reward-grid::before { right: calc(100% / 14); background: var(--line); }
.attendance-reward-grid::after { width: calc((100% - 100% / 7) * (max(var(--done), 1) - 1) / 6); background: linear-gradient(90deg, #a5bc5f, var(--accent)); opacity: min(var(--done), 1); transition: width .6s ease; }
.attendance-reward-card.is-claimed { background: linear-gradient(155deg, var(--surface), #eef2e0); }  /* 뒤 진행선이 비치지 않게 불투명 */
html[data-theme="dark"] .attendance-reward-card.is-claimed { background: linear-gradient(155deg, var(--surface), #233a2c); }
.attendance-reward-card__badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 2px 9px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 10.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 3px 8px rgb(23 103 89 / 22%); }
.attendance-reward-card__badge--tomorrow { background: var(--surface); color: var(--accent); border: 1px solid var(--accent); box-shadow: none; }
.attendance-reward-card.is-tomorrow { border: 1px dashed var(--accent); background: var(--surface); }

/* 달력 + 통계 */
.attendance-month-nav { display: inline-flex; align-items: center; gap: 6px; }
.attendance-month-nav a, .attendance-month-nav span { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink); font-size: 18px; line-height: 1; text-decoration: none; }
.attendance-month-nav span { opacity: .35; }
.attendance-month-nav a:hover { border-color: var(--accent); color: var(--accent); }
.attendance-month-nav__now { font-size: 12px !important; font-weight: 800; }
.attendance-calendar__body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: start; }

.attendance-calendar__day { flex-direction: column; }
.attendance-calendar__day.is-missed > span:first-child { color: var(--muted); }
.attendance-calendar__day.is-missed::after { content: ""; position: absolute; bottom: 8px; width: 4px; height: 4px; border-radius: 50%; background: #d7a9a0; }
.attendance-calendar__streak { position: absolute; z-index: 2; top: 4px; right: 6px; color: #2c6a43; font-size: 9.5px; font-weight: 800; white-space: nowrap; }
.attendance-calendar__streak[hidden] { display: none; }
.attendance-stats { display: grid; gap: 10px; margin: 0; }
.attendance-stats > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-sunk); }
.attendance-stats dt { color: var(--muted); font-size: 12px; }
.attendance-stats dd { margin: 4px 0 0; font-size: 20px; font-weight: 800; }
.attendance-stats__coins { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px !important; font-weight: 700 !important; }
.attendance-stats__coins b { font-size: 16px; }

/* 출석 연출 */
.attendance-fly { position: fixed; z-index: 1000; top: 0; left: 0; margin: -12px 0 0 -12px; font-size: 22px; line-height: 1; pointer-events: none; filter: drop-shadow(0 3px 4px rgb(0 0 0 / 25%)); }
.is-bump { animation: attendance-bump .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes attendance-bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .attendance-reward-grid::after { transition: none; }
  .is-bump { animation: none; }
}

@media (max-width: 900px) {
  .attendance-calendar__body { grid-template-columns: minmax(0, 1fr); }
  .attendance-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .attendance-reward-grid::before, .attendance-reward-grid::after { display: none; }
  .attendance-reward-card__badge { top: -8px; }
  .attendance-progress { margin-top: 0; }
}
@media (max-width: 480px) {
  /* 좁은 달력 칸: 도장을 줄이고 연속 일차 글씨는 뺀다(도장 aria-label 로 출석은 읽힌다) */
  .attendance-calendar__streak { display: none; }
  .attendance-calendar__stamp { width: 32px; height: 32px; }
  .attendance-month-nav a, .attendance-month-nav span { min-width: 30px; height: 30px; }
}