.board-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.board-item {
  padding: 14px 16px;
  border-radius: 10px;
  background: #fff;
  border: none !important;
  transition: background .2s ease;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.board-item:hover { background: #f9fafb; }
.board-item a { font-size: 15px; font-weight: 500; color: #111827; display: block; text-decoration: none; }

.board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding: 0 4px;
}

.board-title { font-size: 18px; font-weight: 700; color: #2b3a55; letter-spacing: -.3px; }
.board-more-btn { font-size: 14px; color: #4aa8ff; text-decoration: none; padding: 6px 10px; border-radius: 8px; transition: background .15s ease, color .15s ease; }
.board-more-btn:hover { background: #e8f3ff; color: #4aa8ff; }

/* 공지사항 & 이용후기 이동 select */
.notice-review-select-wrap {
  position: relative;
  margin-left: auto;
  flex: 0 0 auto;
}

.notice-review-select {
  min-width: 106px;
  height: 30px;
  padding: 0 30px 0 10px;
  box-sizing: border-box;
  color: #475467;
  font-size: 11px;
  font-weight: 600;
  background-color: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 7px;
  outline: none;
  cursor: pointer;
}

.notice-review-select:hover,
.notice-review-select:focus {
  color: #2684ff;
  border-color: #84adff;
  box-shadow: 0 0 0 3px rgba(38, 132, 255, .08);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.related-header-border {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#toggleListBtn { position: absolute; right: 12px; top: 12px; z-index: 20; background: none; border: none; font-size: 18px; cursor: pointer; }

.notice-rolling {
  position: relative;
  height: auto;
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 0 12px;
  transition: transform .6s ease;
}
.notice-rolling.hidden { display: none !important; height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; }
.notice-rolling li { min-height: 46px; padding: 4px 0 !important; box-sizing: border-box; transition: opacity .6s ease !important; border: none !important; }
.notice-rolling li.fade-out { opacity: 0 !important; }

.notice-rolling li a {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  overflow: hidden;
}

.notice-board-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-tag,
.review-tag {
  flex: 0 0 auto;
  min-width: 52px;
  padding: 3px 7px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2684ff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  background: #eff8ff;
  border: 1px solid #d1e9ff;
  border-radius: 6px;
}

.review-tag {
  color: #6941c6;
  background: #f4f3ff;
  border-color: #d9d6fe;
}

.notice-board-loading,
.faq-board-loading,
.notice-board-empty {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #98a2b3;
  font-size: 12px;
  list-style: none;
}

.notice-static { position: relative; display: none; padding: 0 12px; }
.notice-static.show { display: block; max-height: none !important; overflow: visible !important; }
.notice-static .board-item { height: auto !important; padding: 10px 0 !important; overflow: visible !important; border: none !important; padding-right: 40px !important; }

.faq-item { display: flex; flex-direction: column !important; background: #fff; border-radius: 12px; padding: 16px 18px; box-shadow: 0 2px 8px rgba(0,0,0,.05); transition: background .15s ease, box-shadow .15s ease; }
.faq-item:hover { background: #f9fbff; box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.faq-question-row { display: flex; align-items: center; gap: 6px; width: 100%; white-space: nowrap; cursor: pointer !important; }
.faq-tag { background: #eef2ff; color: #4aa8ff; padding: 3px 8px; border-radius: 8px; font-size: 12px; flex-shrink: 0; }
.faq-question-text { font-size: 15px; font-weight: 600; color: #2b3a55; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faq-arrow { font-size: 16px; color: #6b7280; margin-left: auto; transition: transform .2s ease; }
.faq-item.open .faq-arrow { transform: rotate(90deg); }
.faq-answer-row { margin-top: 8px; font-size: 14px; color: #4b5563; line-height: 1.6; white-space: normal !important; word-break: keep-all; }
#faqGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }

.notice-date, .review-writer { display: none !important; }
#noticeRolling li { pointer-events: none; position: relative; }
#noticeRolling li a { pointer-events: auto; }

.notice-wrapper {
  display: grid;
  grid-template-columns: 50fr 50fr;
  gap: 20px;
  align-items: stretch;
  margin-top: 16px;
  border: none !important;
  width: 100%;
  box-sizing: border-box;
}

.notice-left { flex: 1; position: relative; background: #fff; border: 1px solid #e5e7eb; padding: 16px; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.05); min-width: 0; box-sizing: border-box; height: auto; min-height: 270px; max-height: 270px; overflow: hidden; }
.notice-right { flex: 1; background: #fff; border: 0 solid #e5e7eb; padding: 0; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.05); min-width: 0; box-sizing: border-box; display: flex; align-items: stretch; }
.notice-banner-img { width: 100%; height: 100%; object-fit: contain; }
.notice-banner h3 { font-size: 15px; font-weight: 700; color: #2b3a55; margin-bottom: 8px; }
.notice-banner p { font-size: 14px; color: #6b7280; margin-bottom: 14px; line-height: 1.4; }
.notice-btn { background: #4aa8ff; color: #fff; border: none; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; transition: background .15s ease; }
.notice-btn:hover { background: #1e4fcf; }
.notice-left.expanded, .notice-rolling.expanded { max-height: none !important; height: auto !important; overflow: visible !important; }

@media (max-width: 768px) {
  .notice-wrapper { grid-template-columns: 1fr; gap: 16px; }
  #faqGrid { grid-template-columns: 1fr; }
    #noticeRolling .board-item:active,
  #noticeStatic .board-item:active {
    background: #f7faff;
  }


  #noticeRolling
  .board-item:active::before,
  #noticeStatic
  .board-item:active::before {
    height: 65%;
  }
}


@media (max-width: 480px) {
  .related-header-border { gap: 8px; }
  .video-consult-title { min-width: 0; font-size: 13px; }
  .notice-review-select { min-width: 92px; height: 29px; padding-left: 8px; font-size: 10px; }
  .notice-rolling { padding: 0 4px; }
  .notice-rolling li a { gap: 8px; font-size: 12px; }
  .notice-tag, .review-tag { min-width: 48px; padding: 3px 5px; font-size: 9px; }
}

/* ============================================================
   공지사항 & 이용후기
   진행현황 / 영상상담과 동일한 hover 효과
============================================================ */

#noticeRolling .board-item,
#noticeStatic .board-item {
  position: relative;

  cursor: pointer !important;

  transition:
    background-color .18s ease,
    color .18s ease;
}


/* 기존 pointer-events 보정 */
#noticeRolling .board-item {
  pointer-events: auto;
}


/* 링크 영역 */
#noticeRolling .board-item > a,
#noticeStatic .board-item > a {
  position: relative;

  width: 100%;

  padding-left: 12px;

  box-sizing: border-box;

  cursor: pointer;
}


/* ============================================================
   왼쪽 선택 바
============================================================ */

#noticeRolling .board-item::before,
#noticeStatic .board-item::before {
  content: "";

  position: absolute;

  left: 3px;
  top: 50%;

  width: 3px;
  height: 0;

  background: #2684ff;

  border-radius:
    0
    3px
    3px
    0;

  transform:
    translateY(-50%);

  transition:
    height .18s ease;

  pointer-events: none;

  z-index: 2;
}


/* ============================================================
   Hover
============================================================ */

#noticeRolling .board-item:hover,
#noticeStatic .board-item:hover {
  background: #f7faff;
}


#noticeRolling .board-item:hover::before,
#noticeStatic .board-item:hover::before {
  height: 65%;
}


/* 제목 파란색 강조 */
#noticeRolling
.board-item:hover
.notice-board-title,
#noticeStatic
.board-item:hover
.notice-board-title {
  color: #1d4ed8;
}


/* ============================================================
   키보드 포커스
============================================================ */

#noticeRolling
.board-item:focus-within,
#noticeStatic
.board-item:focus-within {
  background: #f7faff;
}


#noticeRolling
.board-item:focus-within::before,
#noticeStatic
.board-item:focus-within::before {
  height: 65%;
}


#noticeRolling
.board-item > a:focus,
#noticeStatic
.board-item > a:focus {
  outline: none;
}


/* 제목 색상 전환 */
#noticeRolling .notice-board-title,
#noticeStatic .notice-board-title {
  transition:
    color .18s ease;
}