:root {
  --brand: #2a6f6f;
  --brand-dark: #1e5252;
  --bg: #faf8f3;
  --text: #2c2c2c;
  --muted: #767676;
  --border: #e2ddd3;
  --error: #c0392b;
  --success: #2e7d32;
  /* 출석 상태 색 */
  --st-present: #2e7d32;
  --st-absent: #c0392b;
  --st-cancel: #6b7280;
  --st-applied: #2f6fb0;
  --st-none: #b7b0a2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: white;
  border-bottom: 1px solid var(--border);
}

.nav-brand {
  font-weight: 700;
  color: var(--brand-dark);
  text-decoration: none;
  font-size: 1.1rem;
}

.nav-links a {
  margin-left: 1.5rem;
  color: var(--text);
  text-decoration: none;
}

.nav-links a:hover { color: var(--brand); }

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.hero {
  text-align: center;
  padding: 2rem 0 1rem;
}

.hero h1 { margin-bottom: 0.2rem; color: var(--brand-dark); }
.since { color: var(--muted); margin-top: 0; }

/* 화면 가장자리를 채우는 은은하게 확대/블러된 배경 (레터박스 여백을 메움) */
.hero-bg-fill {
  position: fixed;
  inset: 0;
  background-image: url('/home_bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(50px) brightness(0.75) saturate(1.1);
  transform: scale(1.15); /* 블러 가장자리가 비치지 않도록 살짝 확대 */
  z-index: -3;
}

/* 실제 사진: 비율 유지 + 잘리지 않게 중앙 정렬, 스크롤 시 블러 처리 */
.hero-bg-fixed {
  position: fixed;
  inset: 0;
  background-image: url('/home_bg.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
  will-change: filter;
}

/* 스크롤 진행도에 맞춰 어두워지는 오버레이 (배경 위, 본문 아래) */
.hero-bg-overlay {
  position: fixed;
  inset: 0;
  background: #0a0a0a;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}

.hero--full {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  color: #fff;
}

.hero--full h1 {
  color: #fff;
  font-size: 2.4rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.hero--full .since {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.scroll-cue {
  position: absolute;
  bottom: 1.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  animation: scroll-cue-bounce 1.8s ease-in-out infinite;
}

@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50% { transform: translateY(8px); opacity: 0.5; }
}

/* 스크롤에 따라 나타나는 소개문구(등장 애니메이션) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 히어로 이후 본문: 블러/암전된 고정 배경 위에 밝은 텍스트로 표시 */
.page-immersive .content-block h2 {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.page-immersive .content-block p,
.page-immersive .content-block li {
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.page-immersive .content-block.cta h2 { text-shadow: none; }
.page-immersive .footer {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.content-block { margin-bottom: 2rem; }
.content-block h2 { color: var(--brand-dark); border-bottom: 2px solid var(--border); padding-bottom: 0.3rem; }

.cta {
  display: block;
  background: var(--brand);
  color: white;
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s;
}
.cta:hover { background: var(--brand-dark); }
.cta h2 { color: white; border: none; }
.cta p { color: white; }

.muted { color: var(--muted); }
.error { color: var(--error); font-weight: 600; }
.success { color: var(--success); font-weight: 600; }

.topic-list { list-style: none; padding: 0; }
.topic-item {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  background: white;
}
.topic-item a {
  text-decoration: none;
  color: var(--text);
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.week-badge {
  background: var(--brand);
  color: white;
  padding: 0.1rem 0.6rem;
  border-radius: 12px;
  font-size: 0.8rem;
}
.topic-title { font-weight: 600; }
.topic-meta { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 0.3rem; }

.locked-box {
  max-width: 400px;
  margin: 3rem auto;
  text-align: center;
}
.locked-box form { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }

input, textarea, select {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  width: 100%;
  font-family: inherit;
}

button, .btn, .btn-secondary, .btn-logout {
  padding: 0 1.2rem;
  height: 2.6rem;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.2;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  vertical-align: middle;
}
button[type="submit"], .btn {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}
button[type="submit"]:hover, .btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

/* 보조 버튼(취소, 질문 추가 등) */
.btn-secondary, button.btn-secondary {
  background: #eee;
  color: var(--text);
  border-color: #eee;
}
.btn-secondary:hover, button.btn-secondary:hover { background: #ddd; }

/* 로그아웃 전용 버튼: 새 주제 등록(teal 채움)과 뚜렷이 구분되는 아웃라인 스타일 */
.btn-logout, button.btn-logout {
  background: white;
  color: var(--error);
  border-color: var(--error);
}
.btn-logout:hover, button.btn-logout:hover { background: var(--error); color: white; }
.link-danger {
  background: none;
  border: none;
  color: var(--error);
  cursor: pointer;
  padding: 0;
  margin-left: 0.5rem;
  text-decoration: underline;
}

.media-box {
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}
.media-type { margin: 0 0 0.3rem; font-weight: 600; color: var(--brand-dark); }

.question-list li { margin-bottom: 0.6rem; }

.comment-list { list-style: none; padding: 0; }
.comment-list li {
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin-bottom: 0.6rem;
}
.comment-author { font-weight: 700; margin: 0 0 0.2rem; color: var(--brand-dark); }
.comment-content { margin: 0; }

.comment-form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.5rem; }

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  background: white;
}
.admin-table th, .admin-table td {
  border: 1px solid var(--border);
  padding: 0.6rem;
  text-align: left;
  font-size: 0.9rem;
}

.topic-form { display: flex; flex-direction: column; gap: 0.4rem; }
.topic-form label { margin-top: 0.8rem; font-weight: 600; font-size: 0.9rem; }
.form-actions { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.question-input { margin-bottom: 0.4rem; }

/* ==================== 출석 관리 (대시보드/캘린더/배지) ==================== */
.admin-nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.sec-title { color: var(--brand-dark); margin: 1.8rem 0 0.7rem; font-size: 1.05rem; }

/* 관리자 출석 화면은 캘린더/2단 레이아웃을 위해 넓은 폭 사용 */
.admin-wide .container { max-width: 1080px; }

.dash-sub { color: var(--muted); margin: 0.15rem 0 0; font-size: 0.9rem; }

/* 요약 카드 */
.stat-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; }
.num.none { color: var(--st-none); }
.stat-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 0.85rem 1rem; text-align: center; }
.stat-card .label { font-size: 0.78rem; color: var(--muted); }
.stat-card .num { font-size: 1.5rem; font-weight: 700; margin-top: 0.15rem; }
.stat-card.hl { background: var(--brand); border-color: var(--brand); }
.stat-card.hl .label, .stat-card.hl .num { color: #fff; }
.num.present { color: var(--st-present); }
.num.absent { color: var(--st-absent); }
.num.cancel { color: var(--st-cancel); }

/* 레이아웃 */
.dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.25rem; align-items: start; }

/* 캘린더 */
.cal { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1rem 1.25rem; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.cal-month { font-weight: 700; color: var(--brand-dark); }
.cal-nav { border: 1px solid var(--border); background: #fff; width: 2rem; height: 2rem; border-radius: 6px; color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.cal-nav:hover { background: #f3f0ea; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.75rem; color: var(--muted); margin-bottom: 0.35rem; }
.cal-dow .sun { color: var(--error); }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-day { min-height: 72px; border: 1px solid transparent; border-radius: 8px; padding: 4px 5px; font-size: 0.78rem; background: #fbfaf7; }
.cal-day.empty { background: transparent; }
.cal-dnum { font-weight: 600; color: #555; text-decoration: none; display: inline-block; }
a.cal-dnum:hover { color: var(--brand); text-decoration: underline; }
.cal-day.today { outline: 2px solid var(--brand); outline-offset: -2px; }
.cal-day.today .cal-dnum { color: var(--brand-dark); }
.cal-day.session { background: #fff; border-color: var(--border); }
.cal-day.session.past { border-left: 3px solid var(--brand); }
.cal-day.session.up { border-left: 3px solid var(--st-applied); background: #f5f9fd; }
.cal-chips { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.chip { display: flex; align-items: center; gap: 4px; font-size: 0.68rem; color: #444; white-space: nowrap; }
.muted-chip { color: var(--muted); }
.up-tag { font-size: 0.66rem; color: var(--st-applied); font-weight: 700; margin-top: 2px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.dot.present { background: var(--st-present); }
.dot.absent { background: var(--st-absent); }
.dot.cancel { background: var(--st-cancel); }
.dot.applied { background: var(--st-applied); }
.dot.none { background: var(--st-none); }

/* 단일 상태 배지 */
.mbadge { font-size: 0.7rem; font-weight: 700; padding: 2px 7px; border-radius: 5px; display: inline-block; color: #fff; white-space: nowrap; }
.mbadge.present { background: var(--st-present); }
.mbadge.absent { background: var(--st-absent); }
.mbadge.cancelled { background: var(--st-cancel); }
.mbadge.applied { background: var(--st-applied); }
.mbadge.none { background: #efece5; color: var(--st-none); border: 1px dashed var(--st-none); }
.cal-day .mbadge { margin-top: 5px; }

/* 경고 패널 */
.panel { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem 1.2rem; }
.panel h3 { margin: 0 0 0.2rem; font-size: 1rem; color: var(--brand-dark); }
.panel-desc { font-size: 0.78rem; color: var(--muted); margin: 0 0 0.9rem; }
.thr-form { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.thr-form select { width: auto; padding: 0.3rem 0.5rem; }
.warn-item { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.7rem; border: 1px solid #f0c9c4; background: #fdf3f2; border-radius: 8px; margin-bottom: 0.5rem; text-decoration: none; color: var(--text); }
.warn-item:hover { background: #fbeae7; }
.warn-item .who { font-weight: 600; }
.warn-item .why { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
.streak-badge { background: var(--st-absent); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.streak-mild { background: #f0ad4e; color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; }
.none-note { font-size: 0.82rem; color: var(--muted); }

/* 범례 */
.legend { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 0.85rem 1rem; }
.legend .item { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; }

/* 세션 관리 */
.session-new { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 1rem; margin-bottom: 1.5rem; }
.session-new > div { display: flex; flex-direction: column; gap: 0.25rem; }
.session-new label { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.session-new input, .session-new select { width: auto; min-width: 150px; }
.agg-cell { font-size: 0.85rem; color: #444; }
.session-meta { font-size: 1rem; }
.badge-status { font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; margin-left: 0.4rem; color: #fff; }
.badge-status.past { background: var(--brand); }
.badge-status.up { background: var(--st-applied); }

/* 출석 처리 테이블 */
.attend-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mini-btn { height: 2rem; padding: 0 0.7rem; border-radius: 6px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 0.82rem; color: var(--text); }
.mini-btn:hover { background: #f3f0ea; }
.mini-btn:disabled { opacity: 0.45; cursor: default; }
.mini-btn.present { border-color: var(--st-present); color: var(--st-present); }
.mini-btn.present:hover:not(:disabled) { background: var(--st-present); color: #fff; }
.mini-btn.absent { border-color: var(--st-absent); color: var(--st-absent); }
.mini-btn.absent:hover:not(:disabled) { background: var(--st-absent); color: #fff; }
.mini-btn.cancel { border-color: var(--st-cancel); color: var(--st-cancel); }
.mini-btn.ghost { color: var(--muted); }

/* 회원 요약 / 위험 표시 */
.member-summary { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: 0.88rem; margin: 0.8rem 0 1rem; }
.member-summary b { font-size: 1.05rem; }
.member-summary .present { color: var(--st-present); }
.member-summary .absent { color: var(--st-absent); }
.member-summary .cancel { color: var(--st-cancel); }
.member-summary .none { color: var(--st-none); }
.risk-line { background: #fdf3f2; border: 1px solid #f0c9c4; color: #a5352a; border-radius: 8px; padding: 0.5rem 0.8rem; font-size: 0.88rem; font-weight: 600; margin: 0.8rem 0; }
.risk-line.mild { background: #fff7e6; border-color: #f0d9a8; color: #7a5b12; }

/* 회원 대시보드 */
.upcoming-box { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem; }
.upcoming-date { margin-top: 0; font-size: 1.05rem; }
.notice { font-size: 0.85rem; color: var(--muted); margin-top: 0.7rem; }
.roster-title { font-size: 1rem; color: var(--brand-dark); margin: 1.5rem 0 0.6rem; }
.roster { list-style: none; padding: 0; margin: 0; }
.roster li { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 0.4rem; background: #fff; }
.roster li.me { border-color: var(--brand); background: #f0f6f6; }

@media (max-width: 760px) {
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
  .cal-day { min-height: 60px; }
}

/* 텍스트형 위험 버튼(삭제/비활성화)이 전역 submit 버튼 스타일에 덮이지 않도록 */
button.link-danger {
  background: none;
  border: none;
  color: var(--error);
  height: auto;
  padding: 0;
  margin-left: 0.5rem;
  text-decoration: underline;
  display: inline;
}
button.link-danger:hover { background: none; color: var(--brand-dark); }