/* ===== 1. 색상을 한곳에 모아두기 ===== */
:root {
  --bg: #eef2f7;
  --navy: #1b2b4b;
  --text: #26324a;
  --muted: #6b778c;
  --line: #d8dfe9;
  --white: #ffffff;
  --red: #c8283c;
  --red-soft: #fdecee;
  --teal: #1f8f86;        /* 분실물 카드 색 */

  /* 일반 공지 카드의 윗줄 색 (카드마다 돌아가며 달라져요) */
  --c1: #2f6fb5;
  --c2: #1f9c8b;
  --c3: #e0a21b;
  --c4: #7a5bc0;
  --c5: #4f9a3d;
}

/* 'hidden' 속성이 항상 우선하도록 */
[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

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

h2 {
  margin: 0 0 16px;
  font-size: 1.5rem;
}

/* ===== 2. 맨 위 제목 영역 ===== */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px 48px;
  background: var(--navy);
  color: var(--white);
}

.top-bar h1 {
  margin: 0;
  font-size: 2.3rem;
  letter-spacing: -0.02em;
}

.top-bar p {
  margin: 4px 0 0;
  font-size: 1.15rem;
  opacity: 0.8;
}

/* 학생용/교사용 전환 버튼 */
.view-switch {
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  overflow: hidden;
}

.view-switch button {
  padding: 10px 18px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--white);
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.7;
}

.view-switch button.active {
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
  opacity: 1;
}

/* ===== 3. 공지사항 / 분실물 탭 ===== */
.tabs {
  display: flex;
  gap: 8px;
  padding: 0 48px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 22px 12px;
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 4px solid transparent;
  cursor: pointer;
}

.tab:hover {
  color: var(--navy);
}

.tab.active {
  color: var(--navy);
  border-bottom-color: var(--navy);
}

/* 분실물 탭 옆의 개수 표시 */
.tab-count {
  min-width: 1.6em;
  padding: 0 8px;
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
  color: var(--white);
  background: var(--teal);
  border-radius: 999px;
}

/* ===== 4. 학생용 화면 ===== */
.student-view {
  padding: 32px 48px;
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}

.section-head h2 {
  margin: 0;
}

.count {
  color: var(--muted);
  font-size: 1.1rem;
}

/* ===== 5. 카드 배열 (화면 너비에 맞춰 자동으로 칸 수가 바뀌어요) ===== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  align-items: start;
}

/* ===== 6. 카드 ===== */
.card {
  --accent: var(--c1);
  position: relative;
  padding: 24px 26px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 10px solid var(--accent);   /* 윗줄 색으로 카드를 구별 */
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(27, 43, 75, 0.1);
}

/* 카드 순서마다 윗줄 색을 바꿔서 서로 구별되게 해요 */
.card:nth-child(5n + 1) { --accent: var(--c1); }
.card:nth-child(5n + 2) { --accent: var(--c2); }
.card:nth-child(5n + 3) { --accent: var(--c3); }
.card:nth-child(5n + 4) { --accent: var(--c4); }
.card:nth-child(5n + 5) { --accent: var(--c5); }

.card h3 {
  margin: 0 0 10px;
  font-size: 1.6rem;
  line-height: 1.3;
}

.card .body {
  margin: 0 0 16px;
  font-size: 1.25rem;
  white-space: pre-wrap;    /* 줄바꿈을 그대로 보여주기 */
  word-break: keep-all;     /* 단어 중간에서 줄이 바뀌지 않게 */
}

.card .meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--muted);
}

/* 중요 공지 (반드시 nth-child 규칙보다 아래에 둬요) */
.card.important {
  --accent: var(--red);
  background: var(--red-soft);
  border-color: var(--red);
  border-top-width: 14px;
}

.card.important h3 {
  color: var(--red);
}

.badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 12px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  background: var(--red);
  border-radius: 999px;
}

/* ===== 7. 분실물 카드 ===== */
/* 분실물 카드는 모두 청록색 윗줄로 해서 공지 카드와 구별해요 */
.card.lost {
  --accent: var(--teal);
}

.info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  padding: 14px 0 2px;
  border-top: 1px solid var(--line);
  font-size: 1.15rem;
}

.info-row {
  display: flex;
  gap: 12px;
}

.info-label {
  flex: 0 0 6.2em;
  font-weight: 700;
  color: var(--teal);
}

.info-value {
  word-break: keep-all;
}

/* 공지가 없을 때 */
.empty {
  grid-column: 1 / -1;
  padding: 56px;
  text-align: center;
  color: var(--muted);
  font-size: 1.3rem;
  background: var(--white);
  border: 2px dashed var(--line);
  border-radius: 14px;
}

/* ===== 8. 교사용 화면 ===== */
.layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 32px;
  padding: 32px 48px;
  align-items: start;
}

.writer {
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* 수정 중일 때 입력 영역을 강조해요 */
.writer.editing {
  border: 2px solid var(--navy);
  box-shadow: 0 0 0 5px rgba(27, 43, 75, 0.12);
}

.writer label {
  display: block;
  margin: 16px 0 6px;
  font-weight: 700;
}

.writer input[type="text"],
.writer input[type="date"],
.writer textarea {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfd;
}

.writer textarea {
  resize: vertical;
}

.writer input:focus,
.writer textarea:focus {
  outline: 3px solid #9db4dd;
  border-color: var(--navy);
}

/* 게시 기간 묶음 */
.period {
  margin: 18px 0 0;
  padding: 4px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.period legend {
  padding: 0 8px;
  font-weight: 700;
}

.period-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.period label {
  margin-top: 8px;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--muted);
}

.period input[type="date"] {
  padding: 10px 8px;
}

.hint {
  margin: 10px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.writer .important-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--red);
  cursor: pointer;
}

.important-check input {
  width: 20px;
  height: 20px;
  accent-color: var(--red);
}

.message {
  min-height: 1.5em;
  margin: 8px 0;
  color: var(--red);
  font-size: 0.95rem;
}

/* 등록(수정 저장) 버튼과 수정 취소 버튼 */
.form-buttons {
  display: flex;
  gap: 10px;
}

.submit-btn {
  flex: 1;
  padding: 14px;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--white);
  background: var(--navy);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.submit-btn:hover {
  background: #2c4272;
}

.cancel-btn {
  padding: 14px 18px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.cancel-btn:hover {
  background: #f1f4f8;
}

/* 교사용 목록에서는 카드를 조금 작게 */
.manage .card-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.manage .card h3 {
  font-size: 1.3rem;
}

.manage .card .body {
  font-size: 1.05rem;
}

.manage .info {
  font-size: 1rem;
}

/* 지금 수정 중인 카드 표시 */
.card.editing {
  outline: 4px solid var(--navy);
  outline-offset: 3px;
}

/* 상태 표시 (게시 중 / 게시 예정 / 게시 종료 / 보관 중 / 주인 찾음) */
.status {
  display: inline-block;
  width: fit-content;
  margin-bottom: 4px;
  padding: 1px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 6px;
}

.status.active    { color: #1d6b2e; background: #def3e2; }
.status.scheduled { color: #8a5a00; background: #fdf0cf; }
.status.expired   { color: #5c6678; background: #e6eaf0; }

/* 게시 기간이 끝난 카드, 주인을 찾은 분실물은 흐리게 */
.card.inactive {
  opacity: 0.6;
}

/* 수정 / 삭제 / 주인 찾음 버튼 */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.edit-btn,
.delete-btn,
.return-btn {
  padding: 4px 14px;
  font-family: inherit;
  font-size: 0.9rem;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
}

.edit-btn {
  color: var(--navy);
  border: 1px solid var(--navy);
}

.edit-btn:hover {
  color: var(--white);
  background: var(--navy);
}

.return-btn {
  color: var(--teal);
  border: 1px solid var(--teal);
}

.return-btn:hover {
  color: var(--white);
  background: var(--teal);
}

.delete-btn {
  color: var(--muted);
  border: 1px solid var(--line);
}

.delete-btn:hover {
  color: var(--red);
  border-color: var(--red);
}

/* ===== 9. 화면이 좁을 때 ===== */
@media (max-width: 900px) {
  .top-bar {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px;
  }
  .tabs {
    padding: 0 24px;
  }
  .student-view,
  .layout {
    padding: 20px 24px;
  }
  .layout {
    grid-template-columns: 1fr;
  }
}

/* ===== 10. 분실물 사진 ===== */
/* 화면에서는 숨기지만 키보드로는 선택할 수 있는 파일 입력칸 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.writer .field-label {
  display: block;
  margin: 16px 0 6px;
  font-weight: 700;
}

.writer label.photo-btn {
  display: block;
  margin: 0;
  padding: 12px;
  text-align: center;
  font-weight: 700;
  color: var(--teal);
  background: #f2faf9;
  border: 2px dashed var(--teal);
  border-radius: 8px;
  cursor: pointer;
}

.writer label.photo-btn:hover {
  background: #e3f4f2;
}

.sr-only:focus-visible + .photo-btn {
  outline: 3px solid #9db4dd;
}

.photo-preview {
  display: block;
  width: 100%;
  max-height: 220px;
  margin-top: 10px;
  object-fit: cover;
  border-radius: 8px;
}

.photo-remove {
  margin-top: 8px;
  padding: 4px 14px;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.photo-remove:hover {
  color: var(--red);
  border-color: var(--red);
}

/* 카드 안의 사진 */
.card .photo {
  display: block;
  width: 100%;
  height: 220px;
  margin: 0 0 16px;
  object-fit: cover;       /* 비율을 유지하면서 칸을 채워요 */
  background: #e6eaf0;
  border-radius: 10px;
  cursor: zoom-in;
}

.manage .card .photo {
  height: 160px;
}

/* 사진 크게 보기 */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 16, 30, 0.88);
  cursor: zoom-out;
}

.lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 8px;
}

/* ===== 11. 제목 옆 비둘기 ===== */
.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dove {
  flex: none;
  width: 92px;
  height: auto;
  overflow: visible;
  animation: dove-float 2.4s ease-in-out infinite;   /* 둥실둥실 떠 있는 느낌 */
}

/* 날개는 어깨 부분(56, 52)을 중심으로 위아래로 퍼덕여요 */
.dove-wing,
.dove-wing-back {
  transform-origin: 56px 52px;
  animation: dove-flap 1s ease-in-out infinite alternate;
}

.dove-wing-back {
  animation-delay: -0.12s;   /* 뒤쪽 날개는 조금 늦게 움직여요 */
}

@keyframes dove-flap {
  from { transform: rotate(-10deg); }
  to   { transform: rotate(14deg); }
}

@keyframes dove-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* 컴퓨터 설정에서 '동작 줄이기'를 켠 경우에는 움직이지 않아요 */
@media (prefers-reduced-motion: reduce) {
  .dove,
  .dove-wing,
  .dove-wing-back {
    animation: none;
  }
}

@media (max-width: 900px) {
  .dove {
    width: 64px;
  }
}

/* ===== 12. 교사용 페이지: 비밀번호 화면, 머리글 오른쪽 ===== */
.top-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.role-badge {
  padding: 6px 16px;
  font-weight: 700;
  color: var(--navy);
  background: var(--white);
  border-radius: 999px;
}

.lock-btn {
  padding: 6px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--white);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  cursor: pointer;
}

.lock-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.lock-wrap {
  display: flex;
  justify-content: center;
  padding: 72px 24px;
}

.lock-box {
  width: 100%;
  max-width: 380px;
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(27, 43, 75, 0.1);
}

.lock-box h2 {
  margin-bottom: 4px;
}

.lock-box p {
  margin: 0 0 16px;
  color: var(--muted);
}

.lock-box .message {
  margin: 8px 0;
  color: var(--red);
}

.lock-box input {
  width: 100%;
  padding: 12px;
  font-size: 1.1rem;
  font-family: inherit;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfd;
}

.lock-box input:focus {
  outline: 3px solid #9db4dd;
  border-color: var(--navy);
}

.lock-box .submit-btn {
  width: 100%;
}