@charset "utf-8";
/* ==========================================================================
   출석부(리빌더 부가기능 rb/rb.mod/attendance · rb/attend.php) — 보드팩토리 디자인 보정

   부가기능 CSS(rb/rb.mod/attendance/css/style.css) 바로 뒤에 붙는다(extend/bf.theme.extend.php
   bf_addon_dark_links — 이 파일이 있으면 자동 다크 변환 대신 이 파일 하나로 라이트 · 다크를 맞춘다).
   부가기능 파일은 고치지 않는다. 선택자는 부가기능 CSS 와 같은 세기라 뒤에 오는 이쪽이 이긴다.
   색은 전부 테마 토큰 — 다크 · 리빌더 강조색 설정을 저절로 따른다. 모양 기준은 우리 달력 위젯(bf.calendar).
   ========================================================================== */

/* ---- 달력 머리 — 이전달 · 년월 · 다음달 ---- */
.rb-att-head { margin-bottom: 14px; gap: 10px; }
.rb-att-head a {
  display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface);
  color: var(--ink-700); font-size: 13px; font-weight: 600; text-decoration: none;
  transition: border-color .15s, color .15s, background-color .15s;
}
.rb-att-head a:hover { border-color: var(--sky-b3); background: var(--sky-50); color: var(--sky-t1); }
#rbPrevBtn::before { content: '‹'; font-size: 16px; line-height: 1; margin-top: -2px; }
#rbNextBtn::after { content: '›'; font-size: 16px; line-height: 1; margin-top: -2px; }
.rb-att-title { font-size: 20px; font-weight: 800; color: var(--ink-900); letter-spacing: -.01em; }

/* ---- 달력 — 둥근 테두리 · 옅은 칸 선 · 요일 색(일 빨강 · 토 강조색) ---- */
.rb-att-cal {
  border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface);
}
.rb-att-cal th, .rb-att-cal td { border: 0; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.rb-att-cal tr > :last-child { border-right: 0; }
.rb-att-cal tbody tr:last-child td { border-bottom: 0; }
.rb-att-cal th {
  padding: 10px 0; background: var(--surface-2); cursor: default;
  font-size: 12px; font-weight: 700; color: var(--ink-500); text-align: center;
}
.rb-att-cal th:first-child, .rb-att-cal td:first-child .rb-att-day { color: #EF6A63; }
.rb-att-cal th:last-child, .rb-att-cal td:last-child .rb-att-day { color: var(--sky-t1); }
.rb-att-cal td { padding: 8px 6px 10px; background: var(--surface); transition: background-color .15s; }
.rb-att-cal td:not(:empty):hover { background: var(--sky-50); }
.rb-att-cal td:empty { background: var(--surface-2); cursor: default; }
.rb-att-cell { min-height: 68px; }
.rb-att-day { margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--ink-700); }
/* 오늘 — 날짜를 강조색 동그라미로(우리 달력 위젯과 같은 표시) · 칸은 옅은 강조 바탕 */
.rb-att-cal td.rb-att-today { background: var(--sky-50); }
.rb-att-cal td.rb-att-today .rb-att-day {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
  background: var(--sky-500); color: #fff;
}
/* 고른 날 — 안쪽 강조색 테두리(검정 → 강조색) */
.rb-att-cal td.rb-att-selected { box-shadow: inset 0 0 0 2px var(--sky-400); }
/* 도장 — 안 찍은 날은 옅게, 찍은 날은 또렷하게 */
.rb-att-img img { width: 72px; transition: opacity .15s; }
.rb-att-img img[src*="attend_not"] { opacity: .45; }
.rb-att-cal td:hover .rb-att-img img[src*="attend_not"] { opacity: .7; }

/* ---- 연속 출석 보상 상자 ---- */
.rb-att-top-wrap { gap: 10px; }
.rb-att-top-no {
  margin-bottom: 12px; padding: 14px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-700); font-size: 13px; line-height: 1.55;
}
.rb-att-top-wrap > .rb-att-top-no { padding: 14px 12px; }
.rb-att-top-no b, .rb-att-top-no strong { color: var(--sky-t1); }
.rb-att-earned { background: var(--sky-50); color: var(--sky-t2); font-weight: 600; }

/* ---- 출석 한마디 ---- */
.rb-att-form { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.rb-att-form textarea {
  height: 84px; padding: 12px 14px !important; resize: vertical;
  border: 1px solid var(--line) !important; border-radius: 10px; background: var(--surface); color: var(--ink-900);
  font-size: 14px; line-height: 1.6; transition: border-color .15s, box-shadow .15s;
}
.rb-att-form textarea::placeholder { color: var(--ink-400); }
.rb-att-form textarea:focus { outline: none; border-color: var(--sky-400) !important; box-shadow: 0 0 0 3px var(--sky-100); }
.rb-att-btn { margin-top: 10px; }
.rb-att-btn button {
  height: 38px; padding: 0 18px; border: 0; border-radius: 10px;
  background: var(--sky-500); color: #fff; font-size: 14px; font-weight: 700;
  transition: background-color .15s;
}
.rb-att-btn button:hover { background: var(--sky-600); }
.rb-att-btn button:disabled { background: var(--ink-300); cursor: default; }
.rb-att-msg { color: var(--ink-500); }
.rb-att-right > .color-999 { line-height: 1.7; }

/* ---- 출석 목록 ---- */
.rb-att-list { margin-top: 22px; }
.rb-att-list-head { padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-900); }
.rb-att-list-date { color: var(--ink-900); }
#rbAttListCount { color: var(--sky-t1); font-weight: 700; }
.rb-att-item { gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.rb-att-meta { color: var(--ink-500); }
.rb-att-text { color: var(--ink-800); }
.rb-att-empty { padding: 28px 12px; color: var(--ink-500); font-size: 13px; }
/* 순위 배지 — 1 ~ 5 등 강조색 단계, 나머지 옅은 칩 */
.rb-att-badge { border-radius: 6px; background: var(--surface-2); color: var(--ink-700); font-weight: 700; }
.rb-att-badge.r1 { background: var(--sky-600); color: #fff; }
.rb-att-badge.r2 { background: var(--sky-500); color: #fff; }
.rb-att-badge.r3 { background: var(--sky-400); color: #fff; }
.rb-att-badge.r4 { background: var(--sky-200); color: var(--sky-t3); }
.rb-att-badge.r5 { background: var(--sky-100); color: var(--sky-t2); }

/* ---- 다크 — 토큰이 알아서 바뀐다. 그림만 조정 ---- */
:root[data-theme="dark"] .rb-att-img img[src*="attend_not"] { opacity: .3; filter: invert(1); }
:root[data-theme="dark"] .rb-att-cal td:hover .rb-att-img img[src*="attend_not"] { opacity: .5; }

@media (max-width: 768px) {
  .rb-att-cell { min-height: 56px; }
  .rb-att-img img { width: 100%; max-width: 48px; }
  .rb-att-cal td { padding: 6px 3px 8px; }
}