/* =========================================================
   출석부 컴포넌트 CSS (Scoped: .attendance-body)
   - 사이트 공통 변수에 안전하게 매핑한 로컬 변수 사용
   - 주석은 한글 표기
   - 관리자 FAB는 카드 우측 상단(absolute) 배치
   ========================================================= */

/* ===== 로컬 변수 매핑 (사이트 공통 토큰과 연결) ===== */
:root{
  /* 공통 토큰이 있으면 우선 사용, 없으면 우회 기본값 */
  --att-text:   var(--text, #0F172A);
  --att-muted:  var(--muted, #6B7280);
  --att-panel:  var(--panel, #FFFFFF);
  --att-border: var(--line, #E5E7EB);
  --att-brand:  var(--brand, #635BFF);
  --att-brand-100: #EEF2FF; /* 포커스 링/하이라이트용 연한 브랜드 컬러 */
  --att-shadow: var(--shadow, 0 10px 30px rgba(17,24,39,.08));
  --att-radius: var(--radius, 16px);
}

*{ box-sizing:border-box }

/* ===== 바디/그리드 ===== */
.attendance-body{ color:var(--att-text); line-height:1.5 }
.att-container{ max-width:1200px; margin:0 auto }
.att-grid{ display:grid; grid-template-columns:1fr; gap:24px }
@media (min-width:1024px){ .att-grid{ grid-template-columns:1fr 1fr } }

/* ===== 카드 ===== */
.att-card{
  background:var(--att-panel);
  border:1px solid var(--att-border);
  border-radius:var(--att-radius);
  padding:20px;
  box-shadow:var(--att-shadow);
}
/* 관리자 설정 카드 내부에 FAB를 고정하기 위해 relative 지정 */
section.att-form .att-card{ position:relative; margin-bottom:30px; }

.att-muted{ color:var(--att-muted); font-size:12px; margin-top:4px }

/* ===== 버튼/액션 ===== */
.att-actions{ display:flex; gap:8px; align-items:center; margin-top:12px }
.att-btn{
  border:1px solid var(--att-border);
  background:var(--att-panel);
  border-radius:12px;
  padding:8px 12px;
  font-size:14px;
  cursor:pointer;
  transition:.15s;
}
.att-btn:hover{ background:#F9FAFB }
.att-btn:active{ transform:scale(.99) }

/* ===== 요약 박스 ===== */
.att-summary{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.att-sum{
  background:#F9FAFB;
  border:1px solid var(--att-border);
  border-radius:12px;
  padding:12px;
  text-align:center;
}
.att-sum-title{ color:var(--att-muted); font-size:12px; margin:0 }
.att-sum-value{ margin-top:4px; font-size:20px; font-weight:700 }

/* ===== 캘린더 ===== */
.att-weekhead{
  margin-top:16px; margin-bottom:16px;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  text-align:center;
  color:var(--att-muted);
  font-size:15px;
}
.att-cal{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
}
@media (min-width:640px){ .att-cal{ gap:12px } }

.att-day{
  position:relative;
  aspect-ratio:1/1;
  border:1px solid var(--att-border);
  border-radius:12px;
  background:var(--att-panel);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.15s;
  font-size:14px;
}
.att-day:hover{ background:#F9FAFB }

.att-date{ position:absolute; top:6px; left:8px; font-size:12px; color:#374151 }
.att-day.out{ background:#F3F4F6; color:#9CA3AF }
.att-day.is-selected{ outline:2px solid var(--att-brand); outline-offset:0 }
/* 오늘 날짜: 브랜드 톤 보더 표시 */
.att-day.is-today{ border-color:var(--att-brand) }

.att-dot{
  position:absolute; right:6px; bottom:6px;
  width:8px; height:8px; border-radius:50%; background:#10B981;
}

/* ===== 폼 ===== */
.att-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.att-label{ display:block; color:var(--att-muted); font-size:12px; margin:0 0 4px }

.att-input,
.att-select,
.att-textarea{
  width:100%;
  border:1px solid var(--att-border);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  background:var(--att-panel);
  outline:none;
  transition:.12s;
}
.att-input:focus,
.att-select:focus,
.att-textarea:focus{
  box-shadow:0 0 0 2px var(--att-brand-100);
  border-color:#BFDBFE; /* 가벼운 블루 톤으로 포커스 피드백 */
}
.att-textarea{ resize:none }
.att-count{ margin-top:4px; text-align:right; color:var(--att-muted); font-size:12px }

/* ===== 빠른 선택 Chip ===== */
.att-quickwrap{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.att-chip{
  border:1px solid var(--att-border);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  background:var(--att-panel);
  cursor:pointer;
}
.att-chip:hover{ background:#F3F4F6 }

/* ===== 제출 버튼 ===== */
.att-submit{
  width:100%;
  border:none;
  background:var(--att-brand);
  color:#fff;
  border-radius:12px;
  padding:12px;
  font-weight:600;
  cursor:pointer;
  margin-top:12px;
}
.att-submit:hover{ filter:brightness(0.95) }
.att-submit:active{ transform:scale(.99) }

/* ===== 기분(무드) 버튼 그룹 ===== */
.mood-wrap{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }
.mood-btn{
  border:1px solid var(--att-border);
  border-radius:12px;
  padding:8px 12px;
  background:var(--att-panel);
  cursor:pointer;
  user-select:none;
}
.mood-btn.active{
  border-color:var(--att-brand);
  box-shadow:0 0 0 2px var(--att-brand-100);
}

/* ===== 목록 ===== */
.att-listhead{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.att-scope{
  border:1px solid var(--att-border);
  border-radius:12px;
  padding:8px 10px;
  font-size:14px;
  background:var(--att-panel);
}
.att-search{ margin-top:12px; display:flex; gap:8px }
.att-search input{ flex:1 }

.att-list{
  margin-top:16px;
  max-height:420px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.att-item{
  border:1px solid var(--att-border);
  border-radius:12px;
  padding:12px;
  transition:.15s;
  background:var(--att-panel);
  position:relative;
}
.att-item:hover{ background:#F9FAFB }
.att-itemrow{ display:flex; gap:12px; align-items:flex-start }

/* 아바타: 현재는 무드 이모지/아이콘을 넣는 자리 */
.att-avatar{
  flex:0 0 36px;
  width:36px; height:36px;
  border-radius:50%;
  background:#EEF2FF;
  color:#111;
  display:grid; place-items:center;
  font-size:18px;
}

.att-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.att-name{
  font-weight:600;
  max-width:200px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.att-time{ color:var(--att-muted); font-size:12px }
.att-msg{ margin-top:2px; font-size:14px }
.att-msg {
  white-space: pre-wrap; /* 줄바꿈 문자를 인식하고 영역을 넘치면 자동 줄바꿈함 */
  word-break: break-all; /* 긴 영문이나 숫자도 영역 밖으로 나가지 않게 조절 */
}
.att-del{
  position:absolute; bottom:8px; right:8px;
  border:1px solid var(--att-border);
  background:var(--att-panel);
  border-radius:10px;
  padding:4px 8px; font-size:12px; cursor:pointer;
}
.att-del:hover{ background:#FEE2E2; border-color:#FECACA }

/* ===== 스크롤바 ===== */
.att-list::-webkit-scrollbar,
.att-cal::-webkit-scrollbar{ height:8px; width:8px }
.att-list::-webkit-scrollbar-thumb,
.att-cal::-webkit-scrollbar-thumb{ background:#D1D5DB; border-radius:8px }

/* ===== 비회원/잠금 상태 ===== */
.att-textarea:disabled,
.att-chip[disabled],
.mood-btn.is-disabled{ opacity:.6 }
.att-textarea:disabled,
.att-chip[disabled]{ cursor:not-allowed }
.mood-btn.is-disabled{ pointer-events:none }

/* ===== 관리자 FAB (카드 우측 상단에 고정) =====
   - fixed → absolute로 변경 (부모 .att-card가 relative여야 함)
*/
.att-fab{
  position:absolute; right:20px; top:20px; z-index:80;
  width:30px; height:30px; border-radius:50%;
  border:0; background:var(--att-brand); color:#fff; cursor:pointer;
  box-shadow:var(--att-shadow);
  display:grid; place-items:center;
}
.att-fab:hover{ opacity:.9 }

/* ===== 모달 ===== */
.att-modal{
  position:fixed; inset:0; background:rgba(17,24,39,.45);
  display:none; align-items:center; justify-content:center; z-index:90;
}
.att-modal.show{ display:flex; }
.att-modal-dlg{
  width:min(560px, 92vw);
  background:#fff; border-radius:16px; box-shadow:var(--att-shadow);
  overflow:hidden; display:flex; flex-direction:column;
}
.att-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--att-border);
}
.att-modal-body{ padding:16px; display:flex; flex-direction:column; gap:12px }
.att-modal-foot{ padding:12px 16px; border-top:1px solid var(--att-border); text-align:right }
.att-modal-close{
  border:0; background:#F3F4F6; border-radius:10px; width:32px; height:32px; cursor:pointer;
}

/* ===== 반응형 여백 ===== */
@media (max-width:1024px){
  .attendance-body{ padding:0 20px }
}

/* 일요일은 빨간색 (out 클래스가 없는 현재 달 날짜만 적용 권장) */
.att-day.is-sun:not(.out) .att-date {
    color: #ff5a5a !important;
}

/* 토요일은 파란색 */
.att-day.is-sat:not(.out) .att-date {
    color: #4a90e2 !important;
}

/* 상단 요일 헤더(일~토) 색상 변경 */
.att-weekhead div:nth-child(1) { color: #ff5a5a; } /* 일 */
.att-weekhead div:nth-child(7) { color: #4a90e2; } /* 토 */

/* 헤더 전체 컨테이너 */
.att-new-header {
  display: flex;
  flex-direction: column; /* 세로로 쌓기 */
  gap: 12px;
  padding: 10px 0 15px 0;
  border-bottom: 2px solid #f1f1f1;
  margin-bottom: 20px;
}

/* 첫 번째 줄: 제목 전용 */
.att-header-top {
  width: 100%;
  text-align: center;
}

.att-header-title {
  font-size: 30px; /* 너비에 맞게 적절히 조절 */
  font-weight: 800;
  margin: 0 !important;
  white-space: nowrap; /* 제목이 절대 줄바꿈 되지 않게 함 */
}

/* 두 번째 줄: 날짜와 버튼 그룹 */
.att-header-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* 바닥 라인 맞춤 */
  width: 100%;
}

/* 왼쪽 오늘 날짜 */
.att-header-today {
  font-size: 14px;
  color: #888;
  padding-bottom: 3px;
}

/* 오른쪽 버튼 그룹 */
.att-header-actions {
  display: flex;
  gap: 6px;
}

.att-header-actions .att-btn {
  padding: 5px 8px;
  font-size: 16px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
}

/* 모바일에서도 동일한 정렬 유지 또는 미세 조정 */
@media (max-width: 768px) {
  .att-header-title {
    font-size: 26px;
  }
}

/* 부모 컨테이너 너비 확보 */
.att-grid {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important; /* 한쪽이 길어져도 반대쪽이 늘어나지 않음 */
  gap: 25px !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* 왼쪽 달력 영역 (40% 고정) */
.att-grid > .att-card {
  flex: 0 0 40% !important;
  width: 40% !important;
  max-width: 40% !important;
  box-sizing: border-box;
}

/* 오른쪽 입력 & 리스트 영역 (남은 60% 강제 점유) */
.att-grid > .att-form {
  flex: 1 1 auto !important;
  /* 전체 100%에서 (왼쪽 40% + 간격 25px)을 뺀 나머지를 정확히 계산 */
  width: calc(60% - 25px) !important;
  min-width: calc(60% - 25px) !important;
  box-sizing: border-box;
}

/* 모바일 대응 (768px 이하일 때만 세로로) */
@media (max-width: 768px) {
  .att-grid {
    flex-direction: column !important;
  }
  .att-grid > .att-card,
  .att-grid > .att-form {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 관리자 모달 내 라디오 버튼 강제 표시 */
.att-radio-group input[type="radio"] {
  display: inline-block !important;
  appearance: auto !important;
  -webkit-appearance: radio !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  cursor: pointer !important;
  opacity: 1 !important;
  position: static !important;
}

.att-radio-group label {
  font-size: 14px !important;
  color: #333 !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
}

/* 메모 리스트 영역 높이 제한 및 스크롤 설정 */
#att-greetingList {
  max-height: 1000px; /* 원하는 높이(px)로 지정하세요 */
  overflow-y: auto;   /* 내용이 max-height를 넘을 때만 스크롤바가 생깁니다 */
  padding-right: 5px; /* 스크롤바와 내용 사이의 간격 */
}

/* 스크롤바 디자인 (선택 사항 - 더 깔끔하게 보이게 함) */
#att-greetingList::-webkit-scrollbar {
  width: 6px;
}
#att-greetingList::-webkit-scrollbar-thumb {
  background-color: #e0e0e0;
  border-radius: 10px;
}
#att-greetingList::-webkit-scrollbar-track {
  background-color: transparent;
}

.att-textarea {
  width: 100%;
  min-height: 200px;
  padding: 19px 10px 10px 45px !important; 
  background-color: #fff9c4 !important;
  background-image: 
    linear-gradient(90deg, transparent 39px, #ff8a80 39px, #ff8a80 41px, transparent 41px),
    linear-gradient(#e0e0e0 1px, transparent 1px);
  background-position: 0 0, 0 1.1em; 
  background-size: 100% 100%, 100% 1.5em;
  line-height: 1.5em !important; 
  font-size: 16px;
  font-family: 'Nanum Gothic', sans-serif;
  border: 1px solid #e0e0e0;
  outline: none;
  box-sizing: border-box;
}

.att-edit-btns {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  gap: 5px;
}

.att-edit, .att-del {
  border: none;
  background: #f1f5f9;
  color: #64748b;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}

.att-edit:hover { background: var(--att-brand); color: #fff; }
.att-del:hover { background: #ef4444; color: #fff; }

.att-edit-input:focus {
  outline: none;
  border-color: var(--att-brand) !important;
  box-shadow: 0 0 0 2px var(--att-brand-100);
}




/* style.css 수정 또는 추가 */
.att-item-btns {
  /* position: absolute; <- 이 줄을 삭제하거나 주석 처리하세요 */
  display: flex;       /* 가로 정렬 */
  gap: 8px;            /* 버튼 사이 간격 */
  justify-content: flex-end; /* 오른쪽 정렬 */
  margin-bottom: 8px;  /* 메모 내용과의 간격 */
}

.att-edit, .att-del {
  position: static;    /* 위치 고정 해제 */
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  border: 1px solid var(--att-border);
  background: #fff;
}

.att-edit {
  color: #007bff;
}

.att-del {
  color: #ff5a5a;
}

/* 버튼 컨테이너: 상단 고정을 풀고 하단 오른쪽으로 배치 */
.att-item-btns {
    position: static !important; /* absolute 해제 */
    display: flex !important;
    justify-content: flex-end !important; /* 오른쪽 정렬 */
    gap: 8px !important;
    margin-top: 10px !important; /* 메모 내용과의 간격 */
    width: 100% !important;
    z-index: 10; /* 클릭 우선순위 확보 */
}

/* 개별 버튼 디자인 */
.att-edit, .att-del {
    position: static !important;
    cursor: pointer !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
    border-radius: 4px !important;
    line-height: 1.4 !important;
}

.att-edit { color: #007bff !important; }
.att-del { color: #ff5a5a !important; }

/* 부모 컨테이너가 버튼을 수용하도록 설정 */
.att-content-area {
    display: flex;
    flex-direction: column;
}