/* * ==========================================
   * 6. News (소식) Page Styles
   * ==========================================
   */
  .news-header {
    padding-top: 80px; /* 헤더 60px 아래 여백 */
    padding-bottom: 20px;
    text-align: center;
  }
  .news-header h2 {
    font-size: clamp(20px, 5vw, 24px);
    font-weight: 700;
    color: var(--color-text-main);
  }

  /* 카테고리 탭 */
  .news-tabs {
    display: flex;
    border-bottom: 1px solid #EAECEF;
    margin-bottom: 30px;
  }
  .tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 14px 0;
    font-size: clamp(16px, 4vw, 18px); /* 최소 폰트 사이즈 준수 */
    font-weight: 600;
    color: #8B95A1;
    position: relative;
    cursor: pointer;
    transition: color 0.2s ease;
  }
  .tab-btn.active {
    color: var(--color-text-main);
  }
  .tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px; /* border 겹침 처리 */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-text-main);
  }

  /* 게시글 목록 */
  .news-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 50px;
  }
  
  .news-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
    transition: transform 0.2s ease;
  }
  .news-card:active {
    transform: scale(0.98);
  }

  .news-card-img {
    width: 100%;
    position: relative;
  }
  .news-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 종료된 이벤트 오버레이 효과 (게시글 전체 덮기) */
  .ended-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.65); /* 전체를 어둡게 처리 */
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px; /* 이모지와 말풍선 사이 간격 */
  }
  
  .ended-emoji {
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin-bottom: 4px;
  }

  /* 이벤트 종료 말풍선 */
  .bubble-ended {
    position: relative;
    background-color: #555555;
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 30px;
    border: 1px solid #ffffff; /* 흰색 테두리 */
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  
  /* 말풍선 위쪽 화살표(꼬리) 뼈대 (흰색 테두리) */
  .bubble-ended::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ffffff;
  }
  
  /* 말풍선 위쪽 화살표(꼬리) 안쪽 (회색 배경) */
  .bubble-ended::after {
    content: '';
    position: absolute;
    top: -5.5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #555555;
  }

  /* 카드 텍스트 영역 */
  .news-card-content {
    padding: 24px;
    flex: 1;
  }
  .news-label {
    display: block;
    font-size: clamp(16px, 4vw, 18px);
    color: var(--color-main);
    font-weight: 600;
    margin-bottom: 12px;
  }
  .news-tit {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 2줄 말줄임 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: clamp(22px, 5.2vw, 26px); /* 최소 폰트 사이즈 준수 */
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.4;
    margin-bottom: 12px;
    word-break: keep-all;
  }
  .news-date {
    display: block;
    font-size: clamp(16px, 4vw, 18px);
    color: #8B95A1;
  }

  /* 페이징 영역 */
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 80px;
  }
  .page-btn {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background: transparent;
    border-radius: 50%;
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 700;
    color: var(--color-text-main);
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  .page-btn.active {
    background-color: #EAECEF; /* 선택된 페이지 회색 원형 배경 */
  }
  .page-arrow {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background: transparent;
    cursor: pointer;
  }
  
  /* CSS로 그리는 꺾쇠 화살표 아이콘 */
  .arrow-icon {
    width: 8px;
    height: 8px;
    border-top: 2px solid #8B95A1;
    border-right: 2px solid #8B95A1;
    display: block;
  }
  .arrow-icon.left { transform: rotate(-135deg); }
  .arrow-icon.right { transform: rotate(45deg); }
  
  .arrow-icon-double {
    display: flex;
  }
  .arrow-icon-double i {
    width: 8px;
    height: 8px;
    border-top: 2px solid #B0B8C1; /* 더블 화살표는 조금 더 연한 색상 */
    border-right: 2px solid #B0B8C1;
    display: block;
  }
  .arrow-icon-double.left i { transform: rotate(-135deg); margin-left: -4px; }
  .arrow-icon-double.left i:first-child { margin-left: 0; }
  
  .arrow-icon-double.right i { transform: rotate(45deg); margin-left: -4px; }
  .arrow-icon-double.right i:first-child { margin-left: 0; }

  /* * ==========================================
   * 6. News Detail Styles (상세 페이지 전용)
   * ==========================================
   */
  .news-detail-header {
    padding-top: 90px; /* 고정 헤더 60px 아래 여백 확보 */
    padding-bottom: 24px;
  }
  .news-detail-title {
    font-size: clamp(22px, 5.2vw, 26px);
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.4;
    margin-bottom: 12px;
    word-break: keep-all;
  }
  .news-detail-date {
    font-size: clamp(16px, 4vw, 18px); /* 최소 사이즈 16px 적용 */
    color: #8B95A1;
    font-weight: 400;
  }
  
  /* 구분선 (이미지 시안 참고: 내용폭에 맞춘 얇은 실선) */
  .news-detail-divider {
    border-bottom: 1px solid #F0F2F5;
  }

  .news-detail-body {
    padding-top: 30px;
    padding-bottom: 100px;
  }
  .news-detail-text {
    font-size: clamp(16px, 4vw, 18px); /* 최소 사이즈 16px 적용 */
    color: var(--color-text-sub);
    line-height: 1.6;
    margin-bottom: 40px;
    word-break: keep-all;
  }
  .news-detail-img {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }

  /* 하단 목록으로 버튼 */
  .btn-list-wrap {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #F0F2F5;
  }
  .btn-list {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 52px;
    border: 1px solid #D1D6DB;
    border-radius: 8px;
    background-color: #ffffff;
    color: var(--color-text-main);
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  .btn-list:active {
    background-color: #F8F9FA;
  }