/* ===== 갤러리 공통 ===== */
.gallery-wrap {
  padding: 1.8rem 1.2rem 3rem;
  max-width: 1100px;
}

/* 툴바 */
.gallery-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.2rem;
}
.gallery-total { font-size: .9rem; color: var(--sub); }
.gallery-total strong { color: var(--navy); font-weight: 900; }
.btn-write {
  padding: .42rem 1rem; background: var(--gold); color: #fff;
  border: none; border-radius: 3px; font-size: .88rem;
  font-weight: 800; cursor: pointer; white-space: nowrap;
}
.btn-write:hover { background: #b88a00; }

/* ===== 사진 갤러리 그리드 ===== */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.photo-card {
  background: var(--white);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
}
.photo-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.13); transform: translateY(-2px); }
.photo-card-thumb {
  width: 100%; aspect-ratio: 4/3;
  overflow: hidden; background: #dde3ee;
  display: flex; align-items: center; justify-content: center;
}
.photo-card-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .2s;
}
.photo-card:hover .photo-card-thumb img { transform: scale(1.04); }
.photo-card-thumb .thumb-icon {
  color: #8090aa;
}
.photo-card-thumb .thumb-icon svg { width: 48px; height: 48px; }
.photo-card-info { padding: .6rem .75rem .75rem; }
.photo-card-title {
  font-size: .92rem; font-weight: 800; color: #111;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: .2rem;
}
.photo-card-meta { font-size: .78rem; color: var(--sub); }

/* ===== 영상 자료 목록 ===== */
.video-list { display: flex; flex-direction: column; gap: .9rem; }
.video-item {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--white); border: 1px solid var(--border);
  padding: .9rem 1rem; cursor: pointer;
  transition: box-shadow .15s;
}
.video-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,.1); }
.video-thumb {
  width: 160px; aspect-ratio: 16/9; flex-shrink: 0;
  background: #111; overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-play-icon {
  position: absolute; color: #fff; opacity: .9;
}
.video-play-icon svg { width: 40px; height: 40px; }
.video-info { flex: 1; min-width: 0; }
.video-title { font-size: 1rem; font-weight: 800; color: #111; margin-bottom: .3rem; }
.video-meta { font-size: .82rem; color: var(--sub); margin-bottom: .5rem; }
.video-desc { font-size: .88rem; color: #444; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== 문서 자료실 ===== */
.docs-list { display: flex; flex-direction: column; gap: 0; border-top: 2px solid var(--navy); }
.docs-item {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem .9rem; border-bottom: 1px solid #eef0f3;
  background: var(--white); cursor: pointer;
  transition: background .1s;
}
.docs-item:hover { background: #f8f9fc; }
.docs-ext {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  font-size: .72rem; font-weight: 900; color: #fff;
  border-radius: 4px;
}
.docs-ext.pdf  { background: #c0392b; }
.docs-ext.hwp  { background: #1a5276; }
.docs-ext.docx { background: #2874a6; }
.docs-ext.xlsx { background: #1e8449; }
.docs-ext.pptx { background: #d35400; }
.docs-ext.zip  { background: #7d6608; }
.docs-ext.etc  { background: var(--sub); }
.docs-info { flex: 1; min-width: 0; }
.docs-title { font-size: .95rem; font-weight: 800; color: #111;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-meta { font-size: .8rem; color: var(--sub); margin-top: .1rem; }
.docs-download {
  flex-shrink: 0; padding: .35rem .9rem;
  background: var(--navy-lt); border: 1px solid var(--border);
  border-radius: 3px; font-size: .82rem; font-weight: 700; color: var(--navy);
  cursor: pointer;
}
.docs-download:hover { background: var(--navy); color: #fff; }

/* ===== 빈 상태 ===== */
.gallery-empty {
  text-align: center; padding: 5rem 1rem;
  color: var(--sub); font-size: 1rem;
}
.gallery-empty svg {
  display: block; margin: 0 auto 1rem;
  width: 56px; height: 56px; opacity: .3; color: var(--sub);
}

/* ===== 페이지네이션 ===== */
.gallery-pagination {
  display: flex; justify-content: center; gap: .3rem;
  margin-top: 1.8rem;
}
.gallery-pagination button {
  min-width: 32px; height: 32px; padding: 0 .5rem;
  border: 1px solid var(--border); background: #fff;
  font-size: .88rem; cursor: pointer; border-radius: 3px; color: #333;
}
.gallery-pagination button:hover { border-color: var(--navy); color: var(--navy); }
.gallery-pagination button.active { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 800; }
.gallery-pagination button:disabled { opacity: .4; cursor: default; }

/* ===== 사진 상세 보기 ===== */
.photo-view { margin-top: .5rem; }
.photo-view-header {
  border-top: 2px solid var(--navy);
  border-bottom: 1px solid var(--border);
  padding: 1.2rem 0 1rem; margin-bottom: 1.2rem;
}
.photo-view-title { font-size: 1.2rem; font-weight: 900; color: #111; margin-bottom: .5rem; }
.photo-view-meta { font-size: .85rem; color: var(--sub); display: flex; gap: 1rem; }
.photo-view-images {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem;
  margin-bottom: 1.2rem;
}
.photo-view-images img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; cursor: zoom-in;
  border: 1px solid var(--border);
}
.photo-view-images.single { grid-template-columns: 1fr; max-width: 600px; }
.photo-view-body {
  font-size: .95rem; color: #333; line-height: 1.9; white-space: pre-wrap;
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--border);
}
.photo-view-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 1.2rem;
}
.post-actions { display: flex; gap: .5rem; }
.btn-back {
  padding: .5rem 1.2rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: 3px;
  font-size: .9rem; font-weight: 700; cursor: pointer; color: #333;
}
.btn-back:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-edit {
  padding: .45rem 1.1rem; background: var(--navy); color: #fff;
  border: none; border-radius: 3px; font-size: .88rem; font-weight: 700; cursor: pointer;
}
.btn-edit:hover { background: #0e2b58; }
.btn-delete {
  padding: .45rem 1.1rem; background: #c0392b; color: #fff;
  border: none; border-radius: 3px; font-size: .88rem; font-weight: 700; cursor: pointer;
}
.btn-delete:hover { background: #922b21; }

/* ===== 등록/수정 폼 (board.css 재사용) ===== */
.post-form {
  border-top: 2px solid var(--navy);
  padding-top: 1.5rem; margin-top: .5rem;
}
.form-heading { font-size: 1.1rem; font-weight: 900; color: var(--navy); margin-bottom: 1.2rem; }
.form-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; flex-wrap: wrap; }
.form-row--col { align-items: flex-start; flex-direction: column; gap: .4rem; }
.form-label { font-size: .9rem; font-weight: 800; color: var(--navy); min-width: 70px; white-space: nowrap; }
.form-hint { font-size: .8rem; font-weight: 400; color: var(--sub); }
.form-input {
  padding: .45rem .75rem; border: 1px solid var(--border);
  border-radius: 3px; font-size: .92rem; color: #222; background: #fff;
}
.form-input:focus { outline: none; border-color: var(--navy); }
.form-input--full { flex: 1; min-width: 200px; width: 100%; }
.form-textarea {
  width: 100%; padding: .7rem .9rem;
  border: 1px solid var(--border); border-radius: 3px;
  font-size: .92rem; line-height: 1.7; color: #222;
  resize: vertical; font-family: inherit;
}
.form-textarea:focus { outline: none; border-color: var(--navy); }
.form-btns { display: flex; gap: .5rem; margin-top: 1.2rem; }
.btn-submit {
  padding: .55rem 1.8rem; background: var(--navy); color: #fff;
  border: none; border-radius: 3px; font-size: .95rem; font-weight: 800; cursor: pointer;
}
.btn-submit:hover { background: #0e2b58; }
.btn-cancel {
  padding: .55rem 1.4rem; background: var(--bg); color: #333;
  border: 1px solid var(--border); border-radius: 3px;
  font-size: .95rem; font-weight: 700; cursor: pointer;
}
.btn-cancel:hover { background: #e0e3ea; }

/* 첨부파일 */
.btn-attach-label {
  display: inline-block; padding: .38rem .9rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 3px; font-size: .88rem; font-weight: 700;
  color: #333; cursor: pointer;
}
.btn-attach-label:hover { background: var(--navy-lt); border-color: var(--navy); color: var(--navy); }
.attach-preview { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.attach-tag {
  display: inline-block; padding: .25rem .7rem;
  background: var(--navy-lt); border: 1px solid #c0cce0;
  border-radius: 12px; font-size: .8rem; color: var(--navy); font-weight: 700;
}
.attach-list {
  margin-top: 1rem; padding: 1rem 1.2rem;
  background: var(--navy-lt); border: 1px solid #c0cce0; border-radius: 4px;
}
.attach-heading {
  display: block; font-size: .88rem; font-weight: 800;
  color: var(--navy); margin-bottom: .55rem;
}
.attach-item {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .8rem; margin: .2rem .3rem .2rem 0;
  background: #fff; border: 1px solid var(--border);
  border-radius: 3px; font-size: .85rem; color: var(--navy);
  font-weight: 700; cursor: pointer;
}
.attach-item:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* 라이트박스 */
.lightbox {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.88); z-index: 1000;
  align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 90vh; object-fit: contain; }
.lightbox-close {
  position: absolute; top: 1rem; right: 1.2rem;
  color: #fff; font-size: 2rem; cursor: pointer; line-height: 1;
  background: none; border: none;
}

/* ===== 반응형 ===== */
@media (max-width: 900px) {
  .photo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-view-images { grid-template-columns: repeat(2, 1fr); }
  .video-thumb { width: 110px; }
}
@media (max-width: 420px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
}