/* ========================================
   RTCMS - 게시판 공통 스타일
   /rtcms-ui/board/common.css

   모든 게시판 페이지에서 공통으로 사용하는 스타일
   - 목록 페이지 (/boards/[id])
   - 상세 페이지 (/boards/[id]/[seq])
   - 작성 페이지 (/boards/[id]/write)
   - 수정 페이지 (/boards/[id]/[seq]/edit)
   ======================================== */

/* ========================================
   1. KRDS 공식 CSS 변수
   ======================================== */
:root {
  /* Colors */
  --krds-white: #fff;
  --krds-black: #000;
  --krds-primary: #246BEB;
  --krds-secondary: #003675;
  --krds-point: #E71825;
  --krds-danger: #EB003B;
  --krds-warning: #FFB724;
  --krds-success: #008A1E;
  --krds-information: #2768FF;
  --krds-primary-5: #EFF5FF;
  --krds-primary-60: #1D56BC;
  --krds-secondary-5: #EDF1F5;
  --krds-secondary-10: #CDD7E4;
  --krds-gray-5: #F8F8F8;
  --krds-gray-10: #F0F0F0;
  --krds-gray-20: #E4E4E4;
  --krds-gray-30: #D8D8D8;
  --krds-gray-40: #C6C6C6;
  --krds-gray-50: #8E8E8E;
  --krds-gray-60: #717171;
  --krds-gray-70: #555555;
  --krds-gray-80: #2D2D2D;
  --krds-gray-90: #1D1D1D;

  /* Font Sizes (rem 기준, html font-size: 62.5% = 10px) */
  --krds-fz-title-sm: 1.7rem;
  --krds-fz-title-md: 1.9rem;
  --krds-fz-title-lg: 2.1rem;
  --krds-fz-title-xl: 2.4rem;
  --krds-fz-body-sm: 1.5rem;
  --krds-fz-body-md: 1.7rem;
  --krds-fz-label-sm: 1.5rem;
  --krds-fz-detail-sm: 1.3rem;

  /* Spacing */
  --krds-spacer-1: 0.4rem;
  --krds-spacer-2: 0.8rem;
  --krds-spacer-3: 1.2rem;
  --krds-spacer-4: 1.6rem;
  --krds-spacer-5: 2rem;
  --krds-spacer-6: 2.4rem;
  --krds-spacer-8: 3.2rem;
  --krds-spacer-10: 4rem;

  /* Border Radius */
  --krds-rd-4: 0.4rem;
  --krds-rd-6: 0.6rem;
  --krds-rd-8: 0.8rem;
  --krds-rd-12: 1.2rem;
}

/* ========================================
   2. 기본 스타일
   ======================================== */
html {
  font-size: 62.5%; /* 1rem = 10px */
}

.board-wrap {
  font-family: 'Pretendard GOV Variable', 'Pretendard GOV', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 1.7rem;
  line-height: 1.6;
  color: var(--krds-gray-90);
  background-color: var(--krds-white);
}

.board-wrap .container {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
}

/* 스크린리더 전용 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 페이지 컨텐츠 영역 */
.page-content {
  padding: 8rem 0 6.4rem;
}

/* ========================================
   3. 서브 비주얼 영역
   ======================================== */
.sub-visual {
  position: relative;
  width: 100%;
  height: 30rem;
  background-color: #003675;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sub-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 54, 117, 0.6);
}

.sub-visual-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--krds-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 5rem;
}

.sub-visual-title {
  font-size: 3.6rem;
  font-weight: 700;
  margin: 0 0 0.8rem 0;
  letter-spacing: -0.05rem;
}

.sub-visual-desc {
  font-size: 1.8rem;
  font-weight: 400;
  margin: 0 0 1.6rem 0;
  opacity: 0.9;
}

/* ========================================
   4. 공통 버튼 스타일
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--krds-spacer-2);
  height: 4.8rem;
  padding: 0 var(--krds-spacer-6);
  font-size: var(--krds-fz-body-md);
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--krds-rd-8);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  box-sizing: border-box;
}

.btn-primary {
  background-color: var(--krds-primary);
  color: var(--krds-white);
  border: none;
}

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

.btn-secondary {
  background-color: var(--krds-white);
  color: var(--krds-gray-80);
  border: 1px solid var(--krds-gray-40);
}

.btn-secondary:hover {
  background-color: var(--krds-gray-5);
  border-color: var(--krds-gray-50);
}

.btn-outline {
  color: var(--krds-gray-70);
  background-color: var(--krds-white);
  border: 1px solid var(--krds-gray-40);
}

.btn-outline:hover {
  color: var(--krds-primary);
  border-color: var(--krds-primary);
  background-color: var(--krds-primary-5);
}

/* 글쓰기 버튼 */
.btn-write {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.2rem 2.4rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: #fff;
  background: var(--krds-primary);
  border: none;
  border-radius: var(--krds-rd-8);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
  flex-shrink: 0;
  height: 4.6rem;
}

.btn-write:hover {
  background: var(--krds-primary-60);
  color: #fff;
}

.btn-write svg {
  width: 1.8rem;
  height: 1.8rem;
}

/* 버튼 영역 */
.article-actions,
.form-actions {
  display: flex;
  justify-content: center;
  gap: var(--krds-spacer-3);
  margin-top: var(--krds-spacer-8);
}

/* 글쓰기 버튼 영역 - 우측 정렬 */
.write-btn-area {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--krds-spacer-6);
  margin-bottom: var(--krds-spacer-4);
}

/* ========================================
   5. 폼 요소 공통 스타일
   ======================================== */
/* 폼 셀렉트 */
.form-select,
.krds-form-select {
  box-sizing: border-box;
  height: 4.6rem;
  padding: 0 3.6rem 0 1.6rem;
  font-size: var(--krds-fz-body-md);
  font-family: inherit;
  color: var(--krds-gray-90);
  background-color: var(--krds-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  background-size: 2rem;
  border: 1px solid var(--krds-gray-40);
  border-radius: var(--krds-rd-8);
  cursor: pointer;
  appearance: none;
  transition: border-color 0.2s;
}

.form-select:focus,
.krds-form-select:focus {
  outline: none;
  border-color: var(--krds-primary);
}

.form-select.md {
  height: 4.6rem;
  min-width: 14rem;
}

/* 폼 입력 */
.form-control,
.krds-input {
  box-sizing: border-box;
  width: 100%;
  height: 4.6rem;
  padding: 0 1.6rem;
  font-size: var(--krds-fz-body-md);
  font-family: inherit;
  color: var(--krds-gray-90);
  background-color: var(--krds-white);
  border: 1px solid var(--krds-gray-40);
  border-radius: var(--krds-rd-8);
  transition: border-color 0.2s;
}

.form-control:focus,
.krds-input:focus {
  outline: none;
  border-color: var(--krds-primary);
}

.form-control::placeholder,
.krds-input::placeholder {
  color: var(--krds-gray-50);
}

/* 폼 그룹 */
.form-group {
  margin-bottom: var(--krds-spacer-6);
}

.form-group label {
  display: block;
  margin-bottom: var(--krds-spacer-2);
  font-size: var(--krds-fz-body-md);
  font-weight: 600;
  color: var(--krds-gray-80);
}

.form-group label .required {
  color: var(--krds-danger);
  margin-left: 0.4rem;
}

/* 텍스트영역 */
.form-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 20rem;
  padding: var(--krds-spacer-4);
  font-size: var(--krds-fz-body-md);
  font-family: inherit;
  color: var(--krds-gray-90);
  background-color: var(--krds-white);
  border: 1px solid var(--krds-gray-40);
  border-radius: var(--krds-rd-8);
  resize: vertical;
  transition: border-color 0.2s;
}

.form-textarea:focus {
  outline: none;
  border-color: var(--krds-primary);
}

/* ========================================
   6. 라벨 스타일
   ======================================== */
.label {
  font-size: var(--krds-fz-body-md);
  font-weight: 700;
  color: var(--krds-gray-80);
  white-space: nowrap;
}

/* ========================================
   7. SVG 아이콘
   ======================================== */
.svg-icon {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.svg-icon.ico-sch {
  width: 2.2rem;
  height: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
}

.svg-icon.ico-down {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23246BEB' stroke-width='2'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E");
}

.svg-icon.ico-link {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23246BEB' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
}

/* ========================================
   8. 뱃지 스타일
   ======================================== */
.krds-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.4rem;
  padding: 0 var(--krds-spacer-2);
  font-size: var(--krds-fz-detail-sm);
  font-weight: 600;
  border-radius: var(--krds-rd-4);
  white-space: nowrap;
}

.krds-badge.bg-light-primary {
  background-color: var(--krds-primary-5);
  color: var(--krds-primary);
}

.krds-badge.bg-danger {
  background-color: var(--krds-danger);
  color: var(--krds-white);
}

.krds-badge.bg-warning {
  background-color: var(--krds-warning);
  color: var(--krds-gray-90);
}

.krds-badge.bg-success {
  background-color: var(--krds-success);
  color: var(--krds-white);
}

/* NEW 뱃지 */
.badge-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.6rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--krds-white);
  background-color: var(--krds-danger);
  border-radius: var(--krds-rd-4);
  margin-left: var(--krds-spacer-2);
}

/* ========================================
   9. 반응형 - 공통 모바일
   ======================================== */
@media (max-width: 768px) {
  html {
    font-size: 56.25%; /* 9px base */
  }

  .sub-visual {
    height: 20rem;
    margin-top: 8rem;
  }

  .sub-visual-title {
    font-size: 2.8rem;
  }

  .sub-visual-desc {
    font-size: 1.6rem;
  }

  .page-content {
    padding: var(--krds-spacer-6) 0 var(--krds-spacer-8);
  }

  .board-wrap .container {
    padding: 0 1.6rem;
  }

  .article-actions,
  .form-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }
}