/* =================================================================
   공통 컴포넌트 CSS - 여러 페이지에서 재사용되는 컴포넌트
   
   🎯 역할 분리:
   • base.css: 글로벌 스타일 + 기본 버튼(.btn-*) + 레이아웃 + CTA 컴포넌트
   • components.css: 폼 컴포넌트 + 폼 전용 버튼(.btn-search, .vms-btn)
   
   ================================================================= */

/* =================================================================
   개인정보 동의 섹션 컴포넌트
   ================================================================= */

.section-title-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}


.privacy-detail-btn {
  font-size: var(--text-lg);
  font-weight: var(--font-regular);
  display:flex;
}

.privacy-section {
  background: var(--color-neutral-250);
  border: 0.125rem solid var(--color-neutral-200);
  padding: var(--space-10) var(--space-8);
  margin-bottom: var(--space-20);
  font-size: var(--text-lg);
  color: var(--color-black);
}

.privacy-notice {
  padding: 0 var(--space-5) var(--space-6);
  font-weight: var(--font-semibold);
  text-align: center;
}

.privacy-detail {
  margin-bottom: var(--space-5);
}

.privacy-scroll-box {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  padding: var(--space-4);
  max-height: 18rem;   /* 288px;  */
  overflow-y: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.privacy-agree-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
}

.privacy-agree-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.privacy-agree-checkbox input[type="checkbox"] {
  width: var(--space-5);
  height: var(--space-5);
  margin: 0;
}

.privacy-agree-checkbox label {
  cursor: pointer;
  margin: 0;
}

.privacy-agree-checkbox:has(input[type="checkbox"]:checked) label {
  color: var(--color-blue);
}


/* =================================================================
   데이터 테이블 컴포넌트 (프로그램/봉사활동 등)
   ================================================================= */

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border-top: 0.125rem solid var(--color-primary);
  margin-bottom: var(--space-20);
}

.data-table th {
  background: var(--color-primary-bg);
  font-weight: var(--font-bold);
  font-size: var(--text-xl);
  text-align: center;
  vertical-align: center;
  padding: var(--space-3) var(--space-4);
}

.data-table td {
  padding: var(--space-4);
  vertical-align: center;
  border-bottom: 0.0625rem solid var(--color-border-light);
  border-right: 0.0625rem solid var(--color-border-light);
  font-size: var(--text-lg);
  font-weight: var(--font-regular);
}

.data-table td:last-child {
  border-right: none;
}

.data-table tr:last-child td {
  border-bottom: 0.125rem solid var(--color-border-light);
}

/* 공통 테이블 컨테이너 */
.data-table-container {
  overflow-x: auto;
  margin-bottom: var(--space-20);
}

/* 상태 버튼 기본 스타일 */
.status-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-full);
  font-weight: var(--font-bold);
  cursor: pointer;
  transition: all var(--animation-duration-normal) ease-in-out;
  text-decoration: none;
}

.status-btn:hover {
  text-decoration: none;
  transform: translateY(-0.125rem);
}

.status-btn.accepting {
  background-color: var(--color-warning);
  color: var(--color-white);
}

.status-btn.accepting:hover {
  background-color: var(--color-warning-hover);
  color: var(--color-white);
}

.status-btn.closed {
  background-color: var(--color-neutral-350);
  color: var(--color-white);
  cursor: not-allowed;
}

/* 상태 배지 기본 스타일 */
.status-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  white-space: nowrap;
  letter-spacing: 0.02em;
  min-width: 3rem;
  text-align: center;
}

.status-primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.status-pending {
  background: var(--color-pending);
  border: 0.0625rem solid var(--color-pending);
}

.status-approved {
  background: var(--color-approved);
  color: var(--color-white);
}

.status-rejected {
  background: var(--color-rejected);
  color: var(--color-white);
}

.status-cancelled,
.status-self_cancelled {
  background: var(--color-cancelled);
  color: var(--color-white);
}

/* =================================================================
   폼 테이블 컴포넌트
   ================================================================= */

.form-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border-top: 0.125rem solid var(--color-primary);
  margin-bottom: var(--space-8);
}

.form-table tr {
  border-bottom: 0.0625rem solid var(--color-border-form);
}

.form-table th {
  background: var(--color-neutral-230);
  font-weight: var(--font-semibold);
  font-size: var(--text-lg);
  text-align: center;
  vertical-align: middle;
  padding: var(--space-2) var(--space-6);
  /* width: var(--size-form-table-th); */
  height: var(--height-form-table-th);
}

.form-table td {
  padding: var(--space-2) var(--space-5);
  vertical-align: middle;
  min-height: var(--height-form-table-th);
}

/* =================================================================
   폼 입력 필드 컴포넌트
   ================================================================= */

.form-input {
  width: 100%;
  max-width: var(--size-form-table-th);
  height: var(--space-10);
  border: 0.0625rem solid var(--color-border-light);
  padding: 0 var(--space-3);
  font-size: var(--text-lg);
  transition: border-color var(--transition-fast);
}

.form-input-full {
  width: 100%;
  max-width: none;
}

.form-textarea {
  width: 100%;
  height: 5rem;
  resize: vertical;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--font-regular);
  border: 0.0625rem solid var(--color-border-light);
  transition: border-color var(--transition-fast);
}

/* =================================================================
   입력 컨테이너 컴포넌트
   ================================================================= */

/* 생년월일 입력 */
.birthday-container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.birthday-input {
  width: 4.9rem;
  text-align: center;
}

/* 전화번호 입력 */
.phone-container {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.phone-select {
  min-width: 4rem;
  max-width: 5rem;
}

.phone-input {
  min-width: 4rem;
  max-width: 5rem;
  text-align: center;
}

.phone-separator {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

/* 이메일 입력 */
.email-container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.email-direct-input {
  width: 12.5rem;
  height: var(--space-10);
  display: none;
}

.email-input {
  width: var(--size-form-table-th);
  height: var(--space-10);
}

.email-select {
  width: 12.5rem;
  color: var(--color-neutral-400);
  background: var(--color-white);
}

.email-at {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

/* 주소 입력 */
.address-full-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  justify-content: center;
}

.address-container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* =================================================================
   버튼 컴포넌트
   ================================================================= */

.btn-search {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: background var(--transition-fast);
  height: var(--space-10);
  width: 6.875rem;
}

.btn-search:hover {
  background: var(--color-primary-hover);
}

.vms-btn {
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.vms-btn:hover {
  background: var(--color-primary-hover);
}

/* =================================================================
   라디오/체크박스 컴포넌트
   ================================================================= */

/* input[type="radio"], input[type="checkbox"] {
  accent-color: var(--color-primary);
} */

.radio-group {
  display: flex;
  align-items: center;
  column-gap: var(--space-12);
  flex-wrap: wrap; /* 줄바꿈 허용 */
}

.radio-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.radio-label {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin-bottom: 0;
  cursor: pointer;
}

/* =================================================================
   유틸리티 클래스
   ================================================================= */

.required {
  color: var(--color-caution);
  margin-left: var(--space-1);
}

.form-guide {
  color: var(--color-caution);
  font-size: var(--text-base);
  margin-top: var(--space-2);
}

/* =================================================================
   NOTE: CTA 버튼은 base.css에서 로드됩니다 (중복 제거)
   ================================================================= */

/* =================================================================
   페이지네이션 컴포넌트 (재사용 가능)
   ================================================================= */

.pagination-container {
  display: flex;
  justify-content: center;
  margin: var(--space-8) 0;
}

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: var(--space-2);
  color: var(--color-neutral-700);
  text-decoration: none;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  transition: all var(--transition-fast);
}

/* .page-link:hover {
  color: var(--color-primary);
  text-decoration: none;
} */

.page-link.current {
  color: var(--color-primary);
  cursor: default;
}

.page-link.first,
.page-link.last {
  font-weight: var(--font-bold);
}

.page-link.prev,
.page-link.next {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
}

/* =================================================================
   post_detail_box (detail-box) 공통 스타일
   ================================================================= */

.image-preview {
  position: absolute;
  bottom: 100%;
  left: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
  display: none;
  max-width: 300px;
  max-height: 300px;
  margin-bottom: 5px;
}

.image-preview img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
}

.image-preview::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: white;
}

.image-preview::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 20px;
  border: 9px solid transparent;
  border-top-color: #ddd;
  margin-top: -1px;
}

.detail-box {
  width: 100%;
  border-top: 2px solid var(--color-primary);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 제목 행 */
.title-row {
  background: var(--color-primary-bg);
  padding: var(--space-3) 0;
  width: 100%;
  display: flex;
  align-items: center;
  min-height: var(--height-form-table-th);
  justify-content: space-between;
}

.post-title {
  font-weight: var(--font-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.title-row .post-title {
  font-size: var(--text-xl);
  padding: 0 var(--space-5);
}

/* 카테고리 프레임 - Frame 165269 */
.category-frame {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-right: var(--space-5);
}

/* 카테고리 텍스트 */
.story-category {
  font-weight: var(--font-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  color: var(--color-primary);
  text-align: center;
  height: auto;
  margin: 0;
}

/* 메타 정보 행 */
.meta-row {
  display: grid;
  grid-template-columns: minmax(110px, 6fr) minmax(90px, auto) minmax(90px, 110px);
  align-items: center;
  border-bottom: 1px solid var(--color-border-form);
  min-height: var(--height-form-table-th);
  padding: 0 var(--space-5);
  gap: var(--space-2);
  background: var(--color-white);
}

.meta-cell.right {
  text-align: right;
}
.meta-text {
  font-size: var(--text-lg);
  font-weight: var(--font-light);
  line-height: var(--leading-normal);
}

.content-row {
  width: 100%;
  min-height: 300px;
  display: flex;
  align-items: stretch;
}

.content-frame {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  padding: var(--space-5) var(--space-2);
  width: 100%;
  min-height: 300px;
  gap: var(--space-6);
}

.image-container {
  width: 100%;
  max-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.image-container img {
  max-width: 100%;
  max-height: 600px;
  /* min-height: 400px; */
  object-fit: contain;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.image-container img:hover {
  opacity: 0.9;
}

.post-content {
  font-weight: var(--font-regular);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  text-align: left;
  width: 100%;
  min-height: 100px;
  display: block;
  white-space: pre-line;
}

.post-content p {
  margin: 0;
}

/* 첨부파일 행 */
.attachment-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: center;
  border-top: 1px solid var(--color-border-form);
  border-bottom: 1px solid var(--color-border-form);
  min-height: var(--height-form-table-th);
  gap: 0;
}

.attachment-label-cell {
  background: var(--color-neutral-230);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--height-form-table-th);
}

.attachment-content-cell {
  padding: 0 var(--space-5);
  display: flex;
  align-items: center;
  height: var(--height-form-table-th);
}
.attachment-label {
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  text-align: center;
  width: 100%;
}

.attachment-file {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: 100%;
  position: relative;
}

.attachment-name {
  font-weight: var(--font-light);
  font-size: var(--text-base);
  line-height: 1.19;
  text-align: left;
  height: 18px;
  display: flex;
  align-items: center;
}

.file-size {
  font-weight: var(--font-regular);
  font-size: var(--text-sm);
  color: var(--color-neutral-400);
}

.file-date {
  font-weight: var(--font-regular);
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
  margin-left: var(--space-3);
}


/* =================================================================
   post_nav_adjacent (이전글/다음글 네비게이션) 공통 스타일
   ================================================================= */
.navigation-table {
    width: 100%;
    max-width: var(--size-content-max);
    margin-top: var(--space-16);
    font-weight: var(--font-regular);
    font-size: var(--text-lg);
}
.navigation-table a {
    text-decoration: none;
    color: inherit;
}
.nav-row {
    display: flex;
    flex-direction: row;
    align-self: stretch;
    width: 100%;
    min-height: 50px;
    transition: color var(--transition-normal);
}
.nav-row.prev {
    border-top: 2px solid var(--color-primary);
    border-bottom: 1px solid var(--color-border-form);
}
.nav-row.next {
    border-bottom: 2px solid var(--color-primary);
}
.nav-row:not(.no-content):hover {
    color: var(--color-primary);
    text-decoration: none;
}
.nav-label-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    width: 120px;
}
.nav-label-content {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: stretch;
    align-self: stretch;
    padding: var(--space-2) var(--space-3);
}
.nav-label {
    text-align: center;
    width: 100%;
    margin: 0;
}
.nav-content-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    flex: 1;
    min-height: 50px;
}
.nav-content-frame {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: stretch;
    align-self: stretch;
    padding: var(--space-2) var(--space-8);
}
.nav-content {
    text-align: left;
    width: 100%;
    margin: 0;
}
.no-content {
    color: var(--color-neutral-350);
}

/* =================================================================
   프로세스 플로우(절차) 공통 컴포넌트
   여러 페이지에서 재사용 (ex. 봉사활동, 시설안내 등)
   ================================================================= */

.process-flow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  margin: 0 auto;
  padding: var(--space-6) 0;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  min-width: 9.375rem; /* 150px */
  max-width: 9.375rem; /* 150px */
}

.process-icon {
  width: var(--size-icon-5xl); /* 80px */
  height: var(--size-icon-5xl); /* 80px */
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.process-text {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  text-align: center;
  line-height: var(--leading-snug);
}

.process-description {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-align: left;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.process-arrow {
  width: var(--size-icon-xl); /* 30px */
  height: var(--size-icon-xl); /* 30px */
  font-size: var(--text-3xl);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =================================================================
   반응형 디자인 - 공통 컴포넌트
   ================================================================= */
@media (max-width: 768px) {

  .section-title-row {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: var(--space-3);
  }

  .section-title-row .privacy-detail-btn {
    align-self: flex-end;
  }

  /* 데이터 테이블 반응형 */
  .data-table {
    font-size: var(--text-base);
  }

  .data-table th,
  .data-table td {
    padding: var(--space-1);
    font-size: var(--text-base);
  }

  /* 폼 테이블 */
  .form-table {
    border-collapse: separate; /* 그리드 전환 시 간격 제어용 */
    border-spacing: 0;
  }

  .form-table #program-info-row {
    grid-template-columns: 1fr;
  }

  .form-table tr {
    display: grid;
    border: none;
    grid-template-columns: minmax(80px, 30%) 1fr; /* 라벨 너비를 더 작게 조정 */
    align-items: center;
  }

  .form-table th,
  .form-table td {
    display: block;   /* 테이블 셀 역할을 일반 블록으로 */
    border-bottom: 0.0625rem solid var(--color-border-form);
    padding: var(--space-2) 0;
    height: 100%;
    align-content: center;    /* 세로 정렬 */
  }

  .form-table td {
    padding-left: var(--space-4);
  }

  
  .form-input, .form-input-full, .form-textarea {
    width: 100%;
    max-width: none; /* 최대 너비 제한 해제 */
  }
  
  .phone-container, .email-container, .address-container, .birthday-container {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .birthday-input {
    width: 4rem !important;
  }
  
  .email-select {
    width: 8rem;
  }

  .phone-select, .phone-input {
    width: 4rem;
    padding: 0 var(--space-1);
  }

  .btn-search {
    width: 100%;
    margin-top: var(--space-2);
  }

  .privacy-section {
    padding: var(--space-6) var(--space-4);
  }

  .privacy-list {
    font-size: var(--text-sm);
  }


  /* 게시글 상세 영역 */
  .detail-box, .post-title, .story-category, .meta-text, .post-content, .attachment-name { font-size: var(--text-base); }
  .attachment-row { grid-template-columns: 1fr; }

  /* 앞에 다른 .attachment-row가 하나라도 있으면(=두 번째 이후) 라벨 숨김 */
  .attachment-row ~ .attachment-row .attachment-label-cell {
    display: none;
  }
  
  .attachment-name-text {
    max-width: 240px;       /* 원하는 최대 너비 */
    white-space: nowrap;    /* 줄바꿈 방지 */
    overflow: hidden;       /* 넘친 텍스트 숨김 */
    text-overflow: ellipsis; /* 말줄임표(...) 적용 */
  }

  
  .nav-row {
      flex-direction: column;
      height: auto;
  }
  .nav-row.prev {
      border-bottom: 2px solid var(--color-border-form);
  }
  .nav-label-cell {
      border-bottom: 1px solid var(--color-border-form);
      width: 100%;
  }
  .nav-label-content,
  .nav-content-frame {
      padding: var(--space-2) var(--space-6);
  }
  .nav-label,
  .nav-content {
      font-size: var(--text-base);
  }

  .process-flow {
    gap: var(--space-5);
  }
  .process-step {
    min-width: 7.5rem; /* 120px */
  }
  .process-icon {
    width: 4rem; /* 64px */
    height: 4rem; /* 64px */
  }
  .process-text {
    font-size: var(--text-sm);
  }
  .process-arrow {
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
  }
}

@media (max-width: 480px) {
  .category-bar {
    display: none;
  }

  .attachment-content-cell {
    padding: 0 var(--space-1);
  }

  .attachment-name-text {
    max-width: 115px;       /* 원하는 최대 너비 */
  }
  .file-date {
    margin-left: 0;
  }

  .process-flow {
    flex-direction: column;
    gap: var(--space-4);
  }

  .process-step {
    max-width: 80%;
  }

  .process-arrow {
    transform: rotate(90deg);
  }
} 

/* =================================================================
   프레임 카드 컴포넌트
   ================================================================= */

.frame-card {
  /* 오토레이아웃 */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 10px;
  gap: 21px;

  position: fixed;
  top: 40%;
  right: 70px;
  transform: translateY(-50%);
  width: 100px;

  /* 배경: 흰색(FFFFFF) + 투명도 60% */
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 1px 1px 9px 1px rgba(0, 0, 0, 0.25);
  border-radius: 40px;
  z-index: 1000;
}

/* 퀵 링크 스타일 */
.quick-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-decoration: none;
}

.quick-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

.quick-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .frame-card {
    display: none;
  }
}