.attendance-section {color: #333; line-height: 1.6; }
.attendance-container { }
.check-in-section { text-align: center; margin: 30px 0; padding: 0; }
.calendar-section h3 { font-size: 22px; font-weight: 700; margin-bottom: 25px; color: #333; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.calendar-header { display: flex; justify-content: center; align-items: center; margin-bottom: 30px; }
.calendar-nav { display: flex; align-items: center; gap: 20px; }
.current-month { font-size: 20px; font-weight: 700; color: #333; min-width: 180px; text-align: center; }
.calendar { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 16px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.calendar th, .calendar td { width: 14.28%; height: 60px; text-align: center; vertical-align: middle; border: 1px solid #e9ecef; position: relative; }
.calendar th { background: #f8f9fa; font-weight: 700; color: #495057; font-size: 16px; height: 50px; }
.calendar th:first-child { color: #dc3545; }
.calendar th:last-child { color: #007bff; }
.calendar td { font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.2s; background: white; }
.calendar td:hover { background: #f8f9fa; }
.calendar td:first-child { color: #dc3545; }
.calendar td:last-child { color: #007bff; }
.calendar .empty-cell { background: #f8f9fa; cursor: default; }
.calendar .empty-cell:hover { background: #f8f9fa; }
.calendar .today { background: white; color: #4361ee; font-weight: 700; font-size: 18px; }
.calendar .attended { background: white; color: #333; font-weight: 500; position: relative; }
.calendar .attended::after { content: '\f00c'; font-family: 'FontAwesome'; position: absolute; bottom: 2px; right: 2px; font-size: 12px; font-weight: normal; color: #37b24d; }
.calendar .today.attended { background: white; color: #4361ee; font-weight: 700; font-size: 18px; }
.calendar td a { color: inherit; text-decoration: none; display: block; width: 100%; height: 100%; line-height: 60px; }
.calendar td a:hover { text-decoration: none; color: inherit; }
.calendar .selected { background: #e3f2fd; color: #1976d2; font-weight: 700; }
.current-month-btn { text-align: center; margin-top: 15px; }
.today-attendance-list { margin-top: 30px; }
.today-attendance-list h5 { font-size: 18px; font-weight: 700; color: #333; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }
.today-attendance-list .card { border: 1px solid #e9ecef; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.na-table-head { background: #f8f9fa; font-weight: 600; color: #495057; border-bottom: 2px solid #dee2e6; }
.na-table-head .d-md-table-cell { padding: 12px 15px; font-size: 14px; }
.today-attendance-list .na-table li { border-bottom: 1px solid #f1f3f4; transition: background-color 0.2s ease; }
.today-attendance-list .na-table li:hover { background-color: #f8f9fa; }
.today-attendance-list .na-table li:last-child { border-bottom: none; }
.today-attendance-list .d-md-table-cell { padding: 12px 15px; font-size: 14px; vertical-align: middle; }
.bottom-buttons { text-align: center; padding: 0 15px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.loading { opacity: 0.6; pointer-events: none; }
.loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid #f3f3f3; border-top: 2px solid #4361ee; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* 반응형 디자인 */
@media (max-width: 768px) {
  .attendance-container { }
  .check-in-section { padding: 0; margin: 25px 15px 30px; }
  .calendar-section h3 { font-size: 18px; gap: 6px; }
  .calendar th, .calendar td { height: 45px; font-size: 14px; }
  .calendar td a { line-height: 45px; }
  .calendar th { font-size: 14px; height: 40px; }
  .calendar .attended::after { font-size: 10px; bottom: 1px; right: 1px; }
  .calendar .today.attended::after { font-size: 10px; bottom: 1px; right: 1px; }
  .current-month { font-size: 18px; min-width: 140px; }
  .calendar-nav { gap: 15px; }
  .today-attendance-list .na-table li { padding: 8px 0 !important; display: table !important; width: 100%; }
  .today-attendance-list .d-md-table-cell { display: table-cell !important; padding: 8px 4px !important; margin: 0 !important; vertical-align: middle; text-align: center; }
  .today-attendance-list .d-md-table-cell:nth-child(1) { width: 40%; text-align: left; padding-left: 15px !important; }
  .today-attendance-list .d-md-table-cell:nth-child(2) { width: 20%; font-size: 11px; color: #6c757d; }
  .today-attendance-list .d-md-table-cell:nth-child(3) { width: 20%; font-size: 12px; }
  .today-attendance-list .d-md-table-cell:nth-child(4) { width: 20%; font-size: 12px; }
  .today-attendance-list .d-md-none { display: none !important; }
}

@media (max-width: 480px) {
  .attendance-container { }
  .calendar-section h3 { font-size: 16px; gap: 4px; }
  .check-in-section { padding: 0; margin: 20px 10px 25px; }
  .calendar th, .calendar td { height: 40px; font-size: 12px; }
  .calendar td a { line-height: 40px; }
  .calendar th { height: 35px; }
  .calendar .attended::after { font-size: 9px; bottom: 1px; right: 1px; }
  .calendar .today.attended::after { font-size: 9px; bottom: 1px; right: 1px; }
  .current-month { font-size: 16px; min-width: 120px; }
  .today-attendance-list .na-table li { padding: 6px 0 !important; }
  .today-attendance-list .d-md-table-cell:nth-child(2) { font-size: 10px; }
  .today-attendance-list .d-md-table-cell:nth-child(3), .today-attendance-list .d-md-table-cell:nth-child(4) { font-size: 11px; }
}

/* TTC_ATTENDANCE_UI_V1_20260129 */
/* Topbar */
.attendance-topbar {
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:center; justify-content:space-between;
  padding:14px 16px; margin:0 0 12px 0;
  border:1px solid #eee; border-radius:12px;
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.attendance-title { font-size:28px; font-weight:900; letter-spacing:-0.03em; line-height:1.1; }
.attendance-title .brand { color:#111; }
.attendance-title .title { color:#dc3545; margin-left:6px; }
.attendance-now { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.attendance-now .label { font-size:13px; color:#666; font-weight:700; }
.attendance-now .now-time { font-size:20px; font-weight:900; color:#111; }
.attendance-now .now-date { font-size:13px; color:#666; }
.attendance-topbar-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.attendance-topbar-right .tip-badge {
  background:#dc3545; color:#fff; font-weight:800;
  padding:4px 10px; border-radius:999px; font-size:12px;
}
.attendance-topbar-right .tip-text { color:#666; font-size:13px; }

/* Stats */
.attendance-stats {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap:10px;
  margin:0 0 16px 0;
}
.attendance-stat {
  border:1px solid #eee; border-radius:12px;
  padding:12px 14px; background:#fff;
  box-shadow:0 1px 8px rgba(0,0,0,.04);
}
.attendance-stat .k { font-size:12px; color:#666; font-weight:800; }
.attendance-stat .v { margin-top:6px; font-size:16px; font-weight:900; color:#111; }

/* Calendar: stamp-friendly */
.calendar th, .calendar td { height: 86px; }
.calendar td a.cal-day {
  line-height: normal !important;
  padding: 6px 8px !important;
  text-align: left !important;
  position: relative !important;
}
.calendar td a.cal-day .day-num {
  position:absolute;
  top:6px; left:8px;
  font-size:14px;
  font-weight:900;
}
.calendar .selected {
  background: #fff1f3 !important;
  color: #dc3545 !important;
  font-weight: 900 !important;
}

/* Big stamp for attended */
.calendar .attended { position:relative; }
.calendar .attended::after { content: none !important; }
.calendar .attended::before {
  content: "출석\A완료";
  white-space: pre;
  position: absolute;
  left: 8px; right: 8px; top: 18px; bottom: 8px;
  border: 2px solid rgba(220,53,69,0.42);
  color: rgba(220,53,69,0.50);
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  letter-spacing: -0.02em;
  transform: rotate(-18deg);
  z-index: 1;
  pointer-events: none;
}
.calendar td a.cal-day { z-index: 2; }

/* Today */
.calendar .today { box-shadow: inset 0 0 0 2px rgba(67,97,238,.25); }

/* Mobile */
@media (max-width: 768px) {
  .attendance-title { font-size:22px; }
  .calendar th, .calendar td { height: 64px; }
  .calendar td a.cal-day .day-num { font-size:12px; top:5px; left:6px; }
  .calendar .attended::before { left:6px; right:6px; top:16px; bottom:6px; font-size:11px; }
}
@media (max-width: 480px) {
  .attendance-title { font-size:20px; }
  .calendar th, .calendar td { height: 58px; }
}


/* TTC_ATTENDANCE_UI_V2_20260129 */

/* Header */
.ttc-att-header{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:14px; flex-wrap:wrap;
  padding:14px 16px;
  background:#fff;
  border:1px solid #f1f1f1;
  border-radius:14px;
  box-shadow:0 6px 22px rgba(0,0,0,.06);
  margin-bottom:12px;
}
.ttc-att-title{
  font-weight:900; letter-spacing:-0.03em;
  font-size:30px; line-height:1.05;
}
.ttc-att-title .brand{ color:#111; }
.ttc-att-title .accent{ color:#dc3545; margin-left:6px; }
.ttc-att-now{
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
}
.ttc-att-now .label{
  font-size:13px; font-weight:800;
  color:#dc3545;
}
.ttc-att-now .value{
  font-size:16px; font-weight:900;
  color:#111;
}

/* Metrics bar (카드 느낌 제거) */
.ttc-att-metrics{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
  margin:0 0 18px 0;
}
.ttc-att-metrics .item{
  background:linear-gradient(180deg, rgba(220,53,69,.06), rgba(220,53,69,.02));
  border:1px solid rgba(220,53,69,.18);
  border-radius:14px;
  padding:12px 14px;
  box-shadow:0 4px 14px rgba(220,53,69,.06);
}
.ttc-att-metrics .k{
  font-size:12px; font-weight:900;
  color:#b4232f;
}
.ttc-att-metrics .v{
  margin-top:6px;
  font-size:18px; font-weight:900;
  color:#111;
  letter-spacing:-0.02em;
}

/* Calendar header/nav red */
.calendar-header{ margin-bottom:16px !important; }
.calendar-nav{ gap:18px !important; }
.ttc-att-nav{
  color:#dc3545 !important;
  font-size:18px;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:999px;
  border:1px solid rgba(220,53,69,.25);
  background:rgba(220,53,69,.05);
}
.ttc-att-nav:hover{ background:rgba(220,53,69,.10); text-decoration:none; }
.current-month{
  color:#111 !important;
  font-weight:900 !important;
  letter-spacing:-0.02em;
}

/* Calendar sizing + cleaner grid */
.calendar{
  border-radius:16px !important;
  box-shadow:0 10px 26px rgba(0,0,0,.06) !important;
}
.calendar th{
  background:#fff7f8 !important;
  color:#111 !important;
  font-weight:900 !important;
}
.calendar th:first-child{ color:#dc3545 !important; }
.calendar th:last-child{ color:#0b66ff !important; }
.calendar th, .calendar td{
  border-color:#f0f0f0 !important;
}
.calendar th, .calendar td{ height:90px !important; }
.calendar td{
  background:#fff !important;
}
.calendar td:hover{ background:#fff7f8 !important; }
.calendar td a.cal-day{
  padding:8px 10px !important;
}
.calendar td a.cal-day .day-num{
  top:8px !important; left:10px !important;
  font-size:14px !important;
  color:#111;
}

/* Selected / Today */
.calendar .selected{
  background:rgba(220,53,69,.08) !important;
  box-shadow: inset 0 0 0 2px rgba(220,53,69,.25) !important;
  color:#111 !important;
}
.calendar .today{
  box-shadow: inset 0 0 0 2px rgba(220,53,69,.18) !important;
}

/* Stamp: 원형 스탬프(직관적) */
.calendar .attended{ position:relative; }
.calendar .attended::before{
  content:"";
  position:absolute;
  left:50%; top:58%;
  width:64px; height:64px;
  transform: translate(-50%,-50%) rotate(-18deg);
  border-radius:50%;
  background:rgba(255,255,255,.88);
  border:3px solid rgba(220,53,69,.55);
  box-shadow:
    inset 0 0 0 2px rgba(220,53,69,.12),
    0 8px 18px rgba(220,53,69,.10);
  z-index:1;
  pointer-events:none;
}
.calendar .attended::after{
  content:"출석\n완료";
  white-space:pre;
  position:absolute;
  left:50%; top:58%;
  transform: translate(-50%,-50%) rotate(-18deg);
  font-weight:900;
  font-size:12px;
  line-height:1.05;
  text-align:center;
  color:rgba(220,53,69,.72);
  letter-spacing:-0.02em;
  z-index:2;
  pointer-events:none;
}

/* 기존 우측하단 체크 제거(이전 CSS 상쇄) */
.calendar .attended::after{ /* 위에서 재정의 */ }
.calendar .attended::before{ /* 위에서 재정의 */ }

/* Check-in button: red */
.check-in-section{ margin:22px 0 28px !important; }
.check-in-section .btn-danger{
  font-weight:900;
  padding:12px 18px;
  border-radius:14px;
  box-shadow:0 10px 22px rgba(220,53,69,.18);
}
.check-in-section .btn-outline-danger{
  font-weight:900;
  padding:12px 18px;
  border-radius:14px;
}

/* Responsive */
@media (max-width: 900px){
  .ttc-att-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px){
  .ttc-att-title{ font-size:22px; }
  .ttc-att-now .value{ font-size:14px; }
  .calendar th, .calendar td{ height:64px !important; }
  .calendar .attended::before{ width:52px; height:52px; top:60%; }
  .calendar .attended::after{ font-size:11px; top:60%; }
}


/* TTC_ATTENDANCE_UI_V3_20260129 */

/* ====== (A) Metrics: 4개 카드 -> 1개 카드(한 박스 안 정렬) ====== */
.ttc-att-metrics{
  display:flex !important;
  flex-wrap:wrap;
  gap:0 !important;
  padding:14px 16px !important;
  border-radius:14px !important;
  background:linear-gradient(180deg, rgba(220,53,69,.06), rgba(255,255,255,.92)) !important;
  border:1px solid rgba(220,53,69,.20) !important;
  box-shadow:0 10px 24px rgba(220,53,69,.08) !important;
  margin:0 0 18px 0 !important;
}
.ttc-att-metrics .item{
  flex:1 1 220px;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 16px !important;
}
.ttc-att-metrics .item + .item{
  border-left:1px solid rgba(220,53,69,.14) !important;
}
.ttc-att-metrics .k{
  font-size:12px !important;
  font-weight:900 !important;
  color:#b4232f !important;
}
.ttc-att-metrics .v{
  margin-top:6px !important;
  font-size:18px !important;
  font-weight:900 !important;
  color:#111 !important;
  letter-spacing:-0.02em !important;
}

/* 모바일에서 2줄로 예쁘게 */
@media (max-width: 900px){
  .ttc-att-metrics .item{
    flex:1 1 50%;
    padding:8px 12px !important;
  }
  .ttc-att-metrics .item + .item{
    border-left:0 !important;
  }
  .ttc-att-metrics .item:nth-child(odd){
    border-right:1px solid rgba(220,53,69,.14) !important;
  }
  .ttc-att-metrics .item:nth-child(n+3){
    border-top:1px solid rgba(220,53,69,.14) !important;
    padding-top:14px !important;
    margin-top:6px !important;
  }
}

/* ====== (B) Stamp: 기존 content none(!important) 무력화 + 도장 재설계 ====== */
/* 이전 규칙에 content:none !important가 있어도 이게 이김 */
.calendar td.attended::after{
  content:"✓\A출석\A완료" !important;
  white-space:pre !important;
  position:absolute !important;
  left:50% !important;
  top:62% !important;
  transform:translate(-50%,-50%) rotate(-18deg) !important;
  font-weight:900 !important;
  font-size:12px !important;
  line-height:1.05 !important;
  text-align:center !important;
  color:rgba(220,53,69,.80) !important;
  z-index:3 !important;
  pointer-events:none !important;
}

/* 원형 스탬프 바디 */
.calendar td.attended::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:62% !important;
  width:66px !important;
  height:66px !important;
  transform:translate(-50%,-50%) rotate(-18deg) !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.92) !important;
  border:3px solid rgba(220,53,69,.55) !important;
  box-shadow:
    inset 0 0 0 3px rgba(220,53,69,.10),
    inset 0 0 0 10px rgba(220,53,69,.05),
    0 10px 22px rgba(220,53,69,.12) !important;
  z-index:2 !important;
  pointer-events:none !important;
}

/* 도장이 숫자/선택 테두리를 너무 가리지 않게 */
.calendar td a.cal-day .day-num{ z-index:5 !important; position:absolute !important; }
.calendar td a.cal-day{ position:relative !important; z-index:6 !important; }

/* ====== (C) 출석완료 안내문 ====== */
.ttc-att-done{
  margin:14px auto 0;
  max-width:720px;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(220,53,69,.06);
  border:1px solid rgba(220,53,69,.18);
  text-align:center;
}
.ttc-att-done-title{
  font-weight:900;
  font-size:16px;
  color:#b4232f;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.ttc-att-done-title i{
  color:#dc3545;
  font-size:18px;
}
.ttc-att-done-sub{
  margin-top:6px;
  color:#666;
  font-size:13px;
  font-weight:700;
}

/* 모바일 도장 크기 */
@media (max-width: 480px){
  .calendar td.attended::before{ width:54px !important; height:54px !important; top:64% !important; }
  .calendar td.attended::after{ font-size:11px !important; top:64% !important; }
}


/* TTC_ATTENDANCE_UI_V4_20260129_CSS */
/* Theme: deep red + neutral (no pink) */
:root{
  --ttc-red:#dc3545;
  --ttc-red-d:#b4232f;
  --ttc-ink:#111;
  --ttc-muted:#666;
  --ttc-line:#ececec;
  --ttc-surface:#fff;
  --ttc-soft:#f7f7f8;
}

/* ===== HERO ===== */
.ttc-att-hero{
  background:var(--ttc-surface);
  border:1px solid var(--ttc-line);
  border-radius:16px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  padding:14px 16px 10px;
  margin:0 0 14px 0;
}
.ttc-att-hero-title{
  text-align:center;
  font-weight:900;
  letter-spacing:-0.03em;
  font-size:30px;
  line-height:1.1;
}
.ttc-att-hero-title .brand{ color:var(--ttc-ink); }
.ttc-att-hero-title .accent{ color:var(--ttc-red); margin-left:6px; }

.ttc-att-hero-dt{
  margin-top:8px;
  display:flex;
  justify-content:flex-end;   /* 우측 정렬 */
  align-items:baseline;
  gap:10px;
}
.ttc-att-hero-dt .label{
  font-size:13px;
  font-weight:900;
  color:var(--ttc-red-d);
}
.ttc-att-hero-dt .value{
  font-size:14px;
  font-weight:900;
  color:var(--ttc-ink);
}

/* ===== STATS BAR (compact, smaller height) ===== */
.ttc-att-statsbar{
  margin-top:10px;
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:0;
  border:1px solid var(--ttc-line);
  border-radius:14px;
  overflow:hidden;
  background:var(--ttc-soft);
}
.ttc-att-statsbar .s{
  padding:10px 12px;
  background:linear-gradient(180deg, #fff, #fafafa);
}
.ttc-att-statsbar .s + .s{
  border-left:1px solid var(--ttc-line);
}
.ttc-att-statsbar .k{
  font-size:12px;
  font-weight:900;
  color:var(--ttc-red-d);
  display:flex;
  align-items:center;
  gap:6px;
}
.ttc-att-statsbar .k i{ color:var(--ttc-red); }
.ttc-att-statsbar .v{
  margin-top:6px;
  font-size:16px;
  font-weight:900;
  color:var(--ttc-ink);
  letter-spacing:-0.02em;
}

/* ===== Calendar tone-down (less pink) ===== */
.calendar{
  border-radius:16px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.08) !important;
}
.calendar th{
  background:#fff !important;
  border-color:var(--ttc-line) !important;
  color:var(--ttc-ink) !important;
  font-weight:900 !important;
}
.calendar td{
  border-color:var(--ttc-line) !important;
  background:#fff !important;
}
.calendar td:hover{ background:#fbfbfb !important; }
.calendar .selected{
  background:#fff !important;
  box-shadow: inset 0 0 0 2px rgba(220,53,69,.30) !important;
}
.calendar .today{
  box-shadow: inset 0 0 0 2px rgba(220,53,69,.18) !important;
}

/* ===== Strong stamp (double ring + check + text) ===== */
.calendar td.attended::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:62% !important;
  width:72px !important;
  height:72px !important;
  transform:translate(-50%,-50%) rotate(-16deg) !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.96) !important;
  border:4px solid rgba(220,53,69,.82) !important;
  box-shadow:
    inset 0 0 0 3px rgba(220,53,69,.14),
    inset 0 0 0 10px rgba(220,53,69,.06),
    0 14px 26px rgba(220,53,69,.12) !important;
  z-index:2 !important;
  pointer-events:none !important;
}
.calendar td.attended::after{
  content:"✓\A출석\A완료" !important;
  white-space:pre !important;
  position:absolute !important;
  left:50% !important;
  top:62% !important;
  transform:translate(-50%,-50%) rotate(-16deg) !important;
  font-weight:900 !important;
  font-size:12px !important;
  line-height:1.05 !important;
  text-align:center !important;
  color:rgba(220,53,69,.90) !important;
  z-index:3 !important;
  pointer-events:none !important;
}

/* 숫자 항상 위 */
.calendar td a.cal-day{ position:relative !important; z-index:6 !important; }
.calendar td a.cal-day .day-num{ z-index:7 !important; }

/* ===== Done message: less pink, more neutral ===== */
.ttc-att-done{
  background:#fff !important;
  border:1px solid rgba(220,53,69,.22) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.06) !important;
}
.ttc-att-done-title{ color:var(--ttc-red-d) !important; }
.ttc-att-done-sub{ color:var(--ttc-muted) !important; }

/* ===== Rank crowns ===== */
.ttc-crown{
  display:inline-block;
  font-size:16px;
  margin-right:6px;
  vertical-align:middle;
  line-height:1;
}
.ttc-crown.c1{ color:#d4af37; } /* gold */
.ttc-crown.c2{ color:#b7c1cc; } /* silver */
.ttc-crown.c3{ color:#cd7f32; } /* bronze */
.ttc-rank{
  font-weight:900;
  color:#444;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .ttc-att-hero-title{ font-size:24px; }
  .ttc-att-statsbar{
    grid-template-columns: 1fr 1fr;
  }
  .ttc-att-statsbar .s:nth-child(3),
  .ttc-att-statsbar .s:nth-child(4){
    border-top:1px solid var(--ttc-line);
  }
  .ttc-att-statsbar .s:nth-child(2){
    border-left:1px solid var(--ttc-line);
  }
  .ttc-att-statsbar .s:nth-child(3){
    border-left:none;
  }
}
@media (max-width: 480px){
  .ttc-att-hero{ padding:12px 12px 10px; }
  .ttc-att-hero-title{ font-size:22px; }
  .ttc-att-hero-dt .value{ font-size:13px; }
  .ttc-att-statsbar .v{ font-size:15px; }
  .calendar td.attended::before{ width:60px !important; height:60px !important; }
  .calendar td.attended::after{ font-size:11px !important; }
}