/*
 * 영화제 소식 — 공지사항 목록 (NW-6100) — 시안 공유_아동권리영화제 PC 627:68331 / 태블릿 627:68490 / MO 627:74446·74285 (CRFF-53)
 * 히어로·세그먼트탭·chip 탭·flag 는 공통 컴포넌트(sub-hero/.tab--segment/.tab--chip/.flag) 재사용,
 * chip 크기와 flag MO 치수는 시안값으로 화면 스코프 오버라이드.
 */

.notice-page .sub-hero {
  --sub-hero-bg: url('../../images/notice/hero-bg.svg');
  --sub-hero-bg-mo: url('../../images/notice/hero-bg-mo.svg');
}

/* 브레이크포인트별 줄바꿈 (online/community 관례 계승) */
.br-mo {
  display: none;
}

/* 한글 어절 단위 줄바꿈 — 여러 줄 텍스트 공통 (글자 중간 분리 방지, outdoor/movie-detail 관례) */
.notice-item-title,
.notice-detail-title,
.notice-detail-content,
.news-card-title,
.news-card-desc,
.notice-empty,
.faq-infobox-desc,
.faq-item .accordion-answer {
  word-break: keep-all;
}

/* ── 탭 묶음 — 세그먼트(화면 이동) + chip 필터 (PC 627:68336: pt24 pb56 px40 gap48) ── */
.notice-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-48);
  padding: var(--spacing-24) var(--spacing-40) var(--spacing-56);
}

/* chip 필터 — 시안 h64/18px/px40 (공통 .tab--chip 은 h52/16 — 화면 스코프 오버라이드) */
.notice-filter .tab-list {
  justify-content: center;
}

.notice-filter .tab-link {
  height: 64px;
  padding: 0 var(--spacing-40);
  font-size: 18px;
}

/* ── MO 소분류 하단 고정 바 (MO_2depth_BN 627:74644 — bg gray-30, h80, 뷰포트 하단 오버레이) — PC 숨김 ── */
.notice-subnav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: none;
  height: 80px;
  padding: 0 var(--spacing-20);
  background-color: var(--color-gray-30);
}

.notice-subnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;   /* 시안 원값 (스케일 밖) */
  align-items: center;
  justify-content: center;
  height: 100%;
}

.notice-subnav li {
  display: flex;
  gap: 14px;   /* 시안 원값 */
  align-items: center;
}

.notice-subnav li + li::before {
  content: '';
  width: 1px;
  height: 16px;
  background-color: var(--color-gray-90);
  opacity: 0.2;
}

.notice-subnav a {
  display: flex;
  height: 28px;
  align-items: center;
  font-size: 14px;
  letter-spacing: -0.5px;
  color: var(--color-gray-90);
  text-decoration: none;
}

.notice-subnav a[aria-current] {
  font-weight: 700;
  color: var(--color-text-inverse);
}

/* ── 본문 섹션 — 총 N개 + 리스트 (PC 627:68340: px40 gap32) ── */
.notice-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  padding: 0 var(--spacing-40);
}

.notice-total {
  font-weight: 700;
  font-size: 30px;
  line-height: 1.35;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
}

.notice-total strong {
  font-weight: 700;
  color: var(--color-cta);
}

/* ── 목록 (PC 행형 — Rows gap12, 행 px20 py16, 일반행 사이 1px 디바이더) ── */
.notice-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

.notice-item-link {
  display: flex;
  gap: var(--spacing-24);
  align-items: center;
  padding: var(--spacing-16) var(--spacing-20);
  text-decoration: none;
}

/* 일반 행 사이 디바이더 (시안: gap12 + 1px + gap12) — 고정행 전후에는 없음 */
.notice-item:not(.notice-item--pinned) + .notice-item:not(.notice-item--pinned) {
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-12);
}

.notice-item--pinned .notice-item-link {
  border-radius: var(--radius-full);
}

/* 행 hover 액티브 컬러 — CRFF 소식 카드와 동일한 노랑 pill (고정 아님) */
.notice-item-link:hover {
  border-radius: var(--radius-full);
  background-color: var(--color-yellow-60);
}

.notice-item-head {
  display: flex;
  flex-shrink: 0;
  gap: var(--spacing-24);
  align-items: center;
  min-width: 0;
}

.notice-item--pinned .notice-item-head {
  flex: 1;
}

.notice-item .flag {
  flex-shrink: 0;
  width: 104px;
  padding: 0;
}

.notice-item-main {
  display: flex;
  flex-shrink: 0;
  gap: var(--spacing-8);
  align-items: center;
  min-width: 0;
}

.notice-item-pin {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: var(--color-cta);
  mask: url('../../images/notice/ic-pin.svg') no-repeat center / 16px;
}

.notice-item-title {
  overflow: hidden;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-item--pinned .notice-item-title {
  font-weight: 700;
}

.notice-item-attach {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: url('../../images/icon/func-attach.svg') no-repeat center / contain;
}

.notice-item-date {
  flex: 1;
  min-width: 0;
  padding-right: var(--spacing-20);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-secondary);
  text-align: right;
  white-space: nowrap;
}

.notice-item--pinned .notice-item-date {
  flex: none;
  width: 190px;
}

.notice-empty {
  padding: var(--spacing-80) 0;
  font-size: 18px;
  color: var(--color-text-secondary);
  text-align: center;
}

/* ── 페이지네이션 (PC gap10 h64, Num 28 원형 active — 627:68448) ── */
.notice-pagination {
  display: flex;
  gap: 10px;   /* 시안 원값 (스케일 밖) */
  align-items: center;
  justify-content: center;
  height: 64px;
  margin-top: var(--spacing-8);   /* 시안 리스트↔페이지네이션 40 = 섹션 gap32 + 8 */
}

.notice-page-arrow {
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--color-text-caption);
  mask: var(--page-icon) no-repeat center / contain;
}

/* 양끝(«») 아이콘은 시안 전용 자산 (627:68449 — last 는 시안처럼 미러 재사용) */
.notice-page-arrow--first { --page-icon: url('../../images/notice/ic-page-first.svg'); }
.notice-page-arrow--prev { --page-icon: url('../../images/icon/func-paginationPrev.svg'); }
.notice-page-arrow--next { --page-icon: url('../../images/icon/func-paginationNext.svg'); }

.notice-page-arrow--last {
  --page-icon: url('../../images/notice/ic-page-first.svg');
  transform: scaleX(-1);
}

/* 끝단 비활성 화살표 — 시안은 상시 노출(상태 색 미표기 — disabled 토큰 적용) */
.notice-page-arrow.is-disabled {
  background-color: var(--color-disabled);
}

.notice-page-ellipsis {
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--color-text-caption);
}

.notice-page-num {
  position: relative;
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-caption);
  text-decoration: none;
}

/* hover 밑줄 인디케이터 (시안 Num 내 hidden Bar — w9.3 h2.3 bottom) */
.notice-page-num:not(.is-active):hover::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%;
  width: 9.3px;   /* 시안 원값 */
  height: 2.3px;   /* 시안 원값 */
  border-radius: var(--radius-full);
  background-color: var(--color-text-caption);
  transform: translateX(-50%);
}

.notice-page-num.is-active {
  font-weight: 700;
  background-color: var(--color-gray-10);
  color: var(--color-text-inverse);
}

/* 본문 끝 ↔ 푸터 120 (시안 627:68488 pt120) */
.notice-page {
  padding-bottom: var(--spacing-120);
}

/* ── 반응형 ≤1023 (MO 627:74446) ── */
@media (max-width: 1023px) {
  .br-mo {
    display: inline;
  }

  /* MO: chip 필터 숨김 → sticky 소분류 바 노출 */
  .notice-filter {
    display: none;
  }

  .notice-subnav {
    display: block;
  }

  .notice-tabs {
    gap: 0;
    margin-bottom: var(--spacing-40);   /* 시안 tab↔본문 40 (627:74652 등 4화면 공통) */
    padding: var(--spacing-12) 0;
  }

  /* 세그먼트 탭 3칩 등분 — 공통 컴포넌트의 활성 칩 hug(flex:0 0 auto)·1줄 고정을 무효화
   * (시안 tab_MO 627:74455 .tab_item_mo = flex 1 0 0 등분 채움) */
  .notice-page .tab--segment .tab-list li,
  .notice-page .tab--segment .tab-list li:has(> .tab-link[aria-current]),
  .notice-page .tab--segment .tab-list li:has(> .tab-link.is-active) {
    flex: 1 1 0;
    min-width: 0;
  }

  .notice-page .tab--segment .tab-link[aria-current],
  .notice-page .tab--segment .tab-link.is-active {
    white-space: normal;
  }

  .notice-section {
    gap: var(--spacing-32);
    padding: 0 var(--layout-margin-mobile);
  }

  .notice-total {
    font-size: 28px;
    line-height: 1.2;
  }

  /* 리스트 — 카드형 (카드 px14 py16 r16 gap20, 리스트 gap8·고정그룹 gap12) */
  .notice-list {
    gap: var(--spacing-8);
  }

  .notice-item-link {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-20);
    align-items: stretch;
    padding: var(--spacing-16) 14px;   /* 시안 원값 px14 (스케일 밖) */
    border-radius: var(--radius-medium);
  }

  .notice-item:not(.notice-item--pinned) + .notice-item:not(.notice-item--pinned) {
    padding-top: var(--spacing-8);
  }

  /* MO: 노랑 제거 — pinned 고정 노랑 삭제 + 터치 sticky-hover 노랑 억제 (모바일은 hover 없음) */
  .notice-item-link:hover {
    border-radius: var(--radius-medium);
    background-color: transparent;
  }

  .notice-item-head {
    flex: none;
    gap: var(--spacing-8);
    align-items: flex-start;
  }

  .notice-item .flag {
    width: 61px;   /* 시안 원값 */
    height: 24px;
    padding: 0 var(--spacing-8);
    font-size: 13px;
  }

  /* MO 공지 flag 는 보더 없음 (시안 627:74466) */
  .notice-item .flag--red {
    border-color: transparent;
  }

  .notice-item-main {
    flex: 1;
    gap: var(--spacing-4);
    align-items: flex-start;
  }

  .notice-item-pin {
    width: 20px;
    height: 20px;
    margin-top: var(--spacing-2);
    mask-size: 13px;
  }

  .notice-item-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;   /* 시안 최대 2줄 (h48) */
    overflow: hidden;
    font-weight: 700;
    font-size: 16px;
    white-space: normal;
  }

  .notice-item-attach {
    width: 20px;
    height: 20px;
    margin-top: var(--spacing-2);
  }

  .notice-item-date {
    flex: none;
    padding-right: 0;
    font-size: 12px;
    text-align: left;
  }

  .notice-item--pinned .notice-item-date {
    width: auto;
  }

  .notice-pagination {
    gap: var(--spacing-8);
    height: 28px;
    margin-top: var(--spacing-8);
  }

  .notice-page {
    padding-bottom: var(--spacing-120);   /* 시안 마지막 콘텐츠↔footer 120 (MO 5화면 공통) */
  }
}

/* ══ 상세 (NW-6110) — 시안 PC 627:68861·726:49261 / MO 627:74645 ══ */

/* 상세는 chip 필터 없음 — 세그먼트 탭만 (tab frame h160 = pt24 + 80 + pb56) */
.notice-detail-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-80);
  padding: 0 var(--spacing-40);
}

.notice-detail-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-64);   /* 본문 박스 ↔ 첨부 (시안 gap64) */
}

.notice-detail-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

/* 제목 블록 — pl22·py16 (시안 원값 22, 스케일 밖) */
.notice-detail-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding: var(--spacing-16) 0 var(--spacing-16) 22px;
}

.notice-detail-title-row {
  display: flex;
  gap: var(--spacing-16);
  align-items: flex-start;
}

.notice-detail-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.35;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
}

.notice-detail-head .flag {
  flex-shrink: 0;
  width: 104px;
  padding: 0;
}

/* flag 배치가 PC(제목행 우측)/MO(날짜행 우측)로 달라 두 슬롯을 두고 뷰포트로 전환 */
.notice-detail-flag--mo {
  display: none;
}

.notice-detail-meta {
  display: flex;
  gap: var(--spacing-20);
  align-items: center;
}

.notice-detail-views {
  display: flex;
  gap: var(--spacing-8);
  align-items: center;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-subtitle);
}

.notice-detail-views strong {
  display: flex;
  gap: 10px;   /* 시안 원값 */
  align-items: center;
  font-weight: 600;
  color: var(--color-text-heading);
}

.notice-detail-views strong::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-gray-10);
}

.notice-detail-date-row {
  display: flex;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}

.notice-detail-date {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
  text-align: right;
}

/* 본문 박스 — border1 r24 p40, 에디터 콘텐츠(sanitized HTML) */
.notice-detail-content {
  min-height: 440px;
  padding: var(--spacing-40);
  border: 1px solid var(--color-gray-10);
  border-radius: var(--radius-large);
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-subtitle);
  overflow-wrap: anywhere;
}

.notice-detail-summary {
  margin-bottom: var(--spacing-4);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text-heading);
}

/* 첨부 */
.notice-detail-attachments {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}

.notice-detail-attachments-title {
  padding: 0 var(--spacing-24);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-surface-black);
}

.notice-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12);
}

.notice-attachment-chip {
  display: flex;
  gap: var(--spacing-8);
  height: 40px;
  padding: 0 var(--spacing-16) 0 var(--spacing-20);
  align-items: center;
  border: 1px solid var(--color-gray-10);
  border-radius: var(--radius-full);
  background-color: var(--color-background);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
  text-decoration: none;
  white-space: nowrap;
}

.notice-attachment-name {
  font-weight: 700;
}

.notice-attachment-chip::after {
  content: '';
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask: url('../../images/icon/func-download.svg') no-repeat center / contain;
}

/* 이전/다음 글 내비 + 목록 버튼 */
.notice-detail-nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-80);
}

.notice-adjacent {
  display: flex;
  gap: var(--spacing-12);
  align-items: stretch;
}

.notice-adjacent-card {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 28px;   /* 시안 원값 (스케일 밖) */
  height: 120px;
  padding: 0 var(--spacing-40);
  align-items: center;
  border: 1px solid var(--color-gray-10);
  border-radius: var(--radius-large);
  background-color: var(--color-background);
  text-decoration: none;
}

/* 호버 강조 — 이전·다음 글 카드 마우스 오버 시 노란색 (지속 활성 아님) */
.notice-adjacent-card:hover {
  background-color: var(--color-yellow-60);
}

.notice-adjacent-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -0.5px;
  color: var(--color-text-subtitle);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-adjacent-label {
  display: flex;
  flex-shrink: 0;
  gap: var(--spacing-4);
  align-items: center;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
}

.notice-adjacent-label::before,
.notice-adjacent-label::after {
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask: var(--nav-arrow) no-repeat center / contain;
}

.notice-adjacent-card--prev .notice-adjacent-label::before {
  content: '';
  --nav-arrow: url('../../images/icon/func-paginationPrev.svg');
}

.notice-adjacent-card--next .notice-adjacent-label::after {
  content: '';
  --nav-arrow: url('../../images/icon/func-paginationNext.svg');
}

.notice-detail-actions {
  display: flex;
  justify-content: center;
}

.notice-detail-actions .button {
  width: 550px;
}

/* ── 상세 반응형 ≤1023 (MO 627:74645) ── */
@media (max-width: 1023px) {
  /* 상세는 하단 필터 바 없음 — 목록 전용 */
  .notice-detail-wrap {
    gap: var(--spacing-56);
    padding: 0 var(--layout-margin-mobile);
  }

  .notice-detail-body {
    gap: var(--spacing-24);   /* 카드 ↔ 첨부 (시안 24) */
  }

  /* MO 는 제목~본문이 한 카드(box: border1 r24 px24 pt28 pb36 gap24) */
  .notice-detail-card {
    padding: 28px var(--spacing-24) 36px;   /* 시안 원값 28/36 (스케일 밖) */
    border: 1px solid var(--color-gray-10);
    border-radius: var(--radius-large);
  }

  .notice-detail-head {
    gap: var(--spacing-20);
    padding: 0;
  }

  .notice-detail-title-row {
    flex-direction: column;
    gap: var(--spacing-20);
  }

  .notice-detail-title {
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 28px;
  }

  .notice-detail-meta {
    flex-direction: column;
    gap: var(--spacing-4);
    align-items: stretch;
  }

  .notice-detail-views {
    gap: var(--spacing-4);
    font-size: 12px;
    color: var(--color-text-body);
  }

  .notice-detail-views strong {
    gap: 5px;   /* 시안 원값 */
    font-weight: 400;
    font-size: 12px;
    color: var(--color-text-subtitle);
  }

  .notice-detail-views strong::before {
    width: 4px;
    height: 4px;
  }

  .notice-detail-flag--pc {
    display: none;
  }

  .notice-detail-flag--mo {
    display: inline-flex;
  }

  /* MO 날짜행 — 날짜 좌측 + flag 우측 (제목행의 flag 를 이 행으로 이동 배치) */
  .notice-detail-date-row {
    display: flex;
    gap: var(--spacing-16);
    align-items: flex-end;
  }

  .notice-detail-date {
    flex: 1;
    font-weight: 400;
    font-size: 14px;
    text-align: left;
    color: var(--color-text-secondary);
  }

  .notice-detail-head .flag {
    width: 61px;   /* 시안 원값 */
    height: 24px;
    padding: 0 var(--spacing-8);
    font-size: 13px;
  }

  .notice-detail-head .flag--red {
    border-color: transparent;
  }

  /* MO 본문 — 카드 내부라 보더 제거, 상단 구분선 + gap32 */
  .notice-detail-content {
    min-height: 0;
    padding: var(--spacing-32) 0 0;
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    color: var(--color-surface-black);   /* 시안 MO 본문 #1c1c1c (PC #333 와 상이 — 뷰포트별 시안값) */
  }

  .notice-detail-summary {
    margin-bottom: var(--spacing-12);
    font-weight: 700;
    color: var(--color-text-body);
  }

  .notice-detail-attachments {
    gap: var(--spacing-16);
  }

  .notice-detail-attachments-title {
    padding: 0 var(--spacing-12);
    color: var(--color-text-heading);
  }

  .notice-attachment-list {
    flex-direction: column;
    gap: var(--spacing-24);
  }

  .notice-attachment-chip {
    justify-content: space-between;
    height: 48px;
    padding: var(--spacing-12) var(--spacing-20);
    font-weight: 600;
  }

  .notice-attachment-name {
    font-weight: 600;
  }

  .notice-detail-nav {
    gap: var(--spacing-56);
  }

  /* 이전/다음 — 세로 스택 카드 (previous: 상단 라운드 + 노랑) */
  .notice-adjacent {
    flex-direction: column;
    gap: 0;
  }

  .notice-adjacent-card {
    flex-direction: column;
    gap: var(--spacing-4);
    height: auto;
    padding: var(--spacing-20) var(--spacing-20) 28px;   /* 시안 원값 28 */
    align-items: flex-start;
    border-color: var(--color-gray-20);   /* 시안 MO 보더 #333 */
    border-radius: 0;
  }

  .notice-adjacent-card--prev {
    border-bottom: 0;
    border-radius: var(--radius-medium) var(--radius-medium) 0 0;
  }

  .notice-adjacent-card--next {
    padding: 28px var(--spacing-20);   /* 시안 원값 */
    border-radius: 0 0 var(--radius-medium) var(--radius-medium);
  }

  /* 이전/다음 중 하나만 있을 때는 붙일 상대가 없으므로 4모서리 모두 둥글게
     (+prev-only 는 --prev 의 border-bottom:0 이 style 까지 none 으로 지워 선이 사라지므로 width·style·색 모두 복구) */
  .notice-adjacent-card:only-child {
    border-radius: var(--radius-medium);
    border-bottom: 1px solid var(--color-gray-20);
  }

  .notice-adjacent-label {
    order: -1;   /* MO 는 라벨이 제목 위 (시안 74711) */
    font-weight: 400;
    font-size: 13px;
    color: var(--color-text-secondary);
  }

  .notice-adjacent-label::before,
  .notice-adjacent-label::after {
    content: none !important;   /* MO 는 화살표 아이콘 없음 (시안 74711) */
  }

  .notice-adjacent-title {
    width: 100%;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
  }

  .notice-detail-actions .button {
    width: 100%;
  }
}

/* ══ CRFF 소식 (NW-6200) — 시안 PC 627:69009 / MO 627:74917 — 3열 카드 그리드 ══ */

/* 목록과 달리 chip 필터 없음 — 세그먼트 탭만. 탭 프레임(pb56 포함) ↔ 총N개 = 80 (시안 y1020→1100) */
.news-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  padding: var(--spacing-80) var(--spacing-40) 0;
}

/* 뉴스만 그리드↔페이지네이션 80 (시안 y1908→1988 — 공지/FAQ 40과 상이) */
.news-section .notice-pagination {
  margin-top: var(--spacing-48);   /* 섹션 gap32 + 48 = 80 */
}

.news-grid {
  display: grid;
  /* minmax(0,1fr) — 제목 nowrap 이 컬럼을 벌려 오버플로우하지 않도록 최소폭 0 보장(카드가 폭에 맞춰 축소) */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-24);
}

/* 태블릿(1024~1279) 2열 — 넓은 태블릿/iPad Pro 도 2열(768~1023 과 동일), PC 3열은 ≥1280 부터 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-48);
  padding: 14px var(--spacing-20) var(--spacing-40);   /* 시안 원값 pt14 (스케일 밖) */
  border: 1px solid var(--color-gray-10);
  border-radius: var(--radius-large);
  background-color: var(--color-background);
  text-decoration: none;
}

/* hover 강조 — 시안 첫 카드 상태 (bg yellow-60 + border 2) */
.news-card:hover {
  padding: 13px 19px 39px;   /* 보더 1→2 두께 보정 (외형 크기 유지) */
  border-width: 2px;
  background-color: var(--color-yellow-60);
}

.news-card-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;   /* 시안 568×320 = 16:9 — 카드 폭에 맞춰 스케일(높이 고정 대신) */
  overflow: hidden;
  border-radius: 21.333px;   /* 시안 원값 — 미확인 목록 (radius 스케일 밖) */
  background-color: var(--color-gray-10);
}

.news-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 16:9 박스 꽉 채움 */
}

.news-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-48);
}

.news-card-text {
  display: flex;
  flex-direction: column;
  gap: 28px;   /* 시안 원값 (스케일 밖) */
}

.news-card-title {
  overflow: hidden;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.35;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;   /* 시안 h60 = 2줄 */
  overflow: hidden;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-body);
}

.news-card-date {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-secondary);
}

/* ── CRFF 소식 반응형 ≤1023 (MO 627:74917 — 1열 카드) ── */
@media (max-width: 1023px) {
  .news-section {
    gap: var(--spacing-32);
    padding: 0 var(--layout-margin-mobile);   /* 상단 40 은 .notice-tabs margin-bottom 이 공급 */
  }

  /* MO 는 그리드↔페이지네이션 40 (시안 y1959→1999) — PC 전용 80 오버라이드 리셋 */
  .news-section .notice-pagination {
    margin-top: var(--spacing-8);
  }

  /* 태블릿(768~1023) 2열 — PC 3열 ↔ MO 1열 사이 보정. 카드 치수는 PC 값 재사용(2열 폭이 PC 3열 폭과 유사).
     카드 축소는 아래 max-width:767 로 내려 모바일 전용으로 둔다 (CRFF-353 소식 목록 태블릿 반응형). */
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-24);
  }
}

@media (max-width: 767px) {
  .news-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-20);
  }

  .news-card {
    gap: var(--spacing-16);
    padding: var(--spacing-12) var(--spacing-12) var(--spacing-20);
    border-radius: var(--radius-medium);
  }

  .news-card:hover {
    padding: var(--spacing-12) var(--spacing-12) var(--spacing-20);
    border-width: 1px;   /* MO 강조 상태는 보더 1 유지 (시안 627:74940) */
  }

  .news-card-thumb {
    border-radius: var(--radius-small);   /* 16:9·cover 는 base 공통, 모바일은 radius 만 축소 */
  }

  .news-card-body {
    gap: var(--spacing-16);
  }

  .news-card-text {
    gap: var(--spacing-4);
  }

  .news-card-title {
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-text-subtitle);
  }

  .news-card-desc {
    -webkit-line-clamp: none;
    display: block;
    font-size: 14px;
    color: var(--color-text-heading);
  }

  .news-card-date {
    font-size: 13px;
  }
}

/* ══ FAQ (NW-6300) — 시안 PC 627:68717 / MO 627:74810 (CRFF-53) ══ */

/* 아코디언 리스트 컨테이너 — 보더 카드 */
.faq-list {
  background-color: var(--color-background);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
}

/* 행간 디바이더 — 좌우 24 인셋 */
.faq-item + .faq-item::before {
  content: '';
  display: block;
  height: 1px;
  margin: 0 var(--spacing-24);
  background-color: var(--color-border);
}

.faq-item-heading {
  margin: 0;
}

/* 접힘 행 h120 px40 — 공통 .accordion(h80·질문18·Q24) 화면 스코프 오버라이드 */
.faq-item .accordion-question {
  gap: var(--spacing-16);
  min-height: 120px;
  padding: 0 var(--spacing-40);
}

.faq-item .accordion-q {
  width: 28px;
  padding-bottom: 2px;   /* 시안 원값 (베이스라인 보정) */
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 32px;
}

.faq-item .accordion-title {
  font-size: 28px;
  line-height: 1.35;
}

.faq-item .accordion-chevron {
  width: 40px;
  height: 40px;
  margin-left: var(--spacing-8);   /* 질문↔화살표 24 (gap16 + 8) */
}

/* 답변 — 좌우 88(px40 + 48) pb48 */
.faq-item .accordion-answer {
  padding: 0 calc(var(--spacing-40) + var(--spacing-48)) var(--spacing-48);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-body);
}

.faq-item .accordion-answer p,
.faq-item .accordion-answer li {   /* 목록 항목도 문단과 동일 (CRFF-232 리치 에디터 <ul><li>) */
  font-weight: 600;
  font-size: 22px;
}

/* ── 1:1 문의 안내 + 문의처 — 회색 카드 (시안 PC 1820:54396 / MO 1820:54542) ── */
.faq-infobox {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);   /* 안내 top ↔ 문의처 */
  margin: var(--spacing-40) var(--spacing-40) 0;
  padding: var(--spacing-24) var(--spacing-32);
  background-color: var(--color-background-section);
  border-radius: var(--radius-large);
}

/* 안내 top: [ⓘ+제목/설명] ↔ 1:1문의 버튼(우측·수직중앙) */
.faq-infobox-top {
  display: flex;
  gap: var(--spacing-40);
  align-items: center;
}

.faq-infobox-intro {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-8);   /* 제목 ↔ 설명 */
  min-width: 0;
}

.faq-infobox-headline {
  display: flex;
  gap: var(--spacing-8);   /* 아이콘 ↔ 제목 */
  align-items: center;
}

.faq-infobox-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background-color: var(--color-text-caption);
  mask: url('../../images/icon/func-info-line.svg') no-repeat center / contain;
  -webkit-mask: url('../../images/icon/func-info-line.svg') no-repeat center / contain;
}

.faq-infobox-title {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
}

.faq-infobox-desc {
  padding-left: var(--spacing-40);   /* 아이콘(32)+gap(8) 만큼 들여써 제목과 좌측 정렬 */
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-caption);
}

.faq-infobox-button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 var(--spacing-20) 0 var(--spacing-24);
  background-color: var(--color-background);
  border: 1px solid var(--color-text-heading);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
  text-decoration: none;
}

.faq-infobox-button::after {
  content: '';
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask: url('../../images/icon/func-paginationNext.svg') no-repeat center / contain;
  -webkit-mask: url('../../images/icon/func-paginationNext.svg') no-repeat center / contain;
}

/* 문의처 (이메일·전화는 관리자 관리, 영업시간 고정) — 시안 1820:54396 */
.faq-infobox-contact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  margin: 0;
  padding-left: var(--spacing-40);
}

.faq-infobox-contact-row {
  display: flex;
  gap: var(--spacing-8);   /* 라벨 ↔ 값 */
  align-items: flex-start;
}

.faq-infobox-contact-label {
  flex-shrink: 0;
  width: 88px;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-caption);
}

.faq-infobox-contact-value {
  display: flex;
  gap: var(--spacing-8);
  align-items: center;
  margin: 0;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
}

.faq-infobox-contact-value--hours {
  align-items: center;   /* PC: 평일…시간 + (점심…) 한 줄 인라인 */
}

.faq-infobox-contact-divider {
  flex-shrink: 0;
  width: 1px;
  height: 14px;
  background-color: var(--color-text-caption);   /* PC 구분선 = caption(#767676) */
}

.faq-infobox-contact-note {
  font-weight: 400;
  font-size: 20px;
  color: var(--color-text-caption);
}

@media (max-width: 1023px) {
  /* 아코디언 — 공통 MO 값 기반, 시안(627:74835) 차이만 보정 */
  .faq-item .accordion-question {
    gap: var(--spacing-12);
    min-height: 80px;
    padding: 0 var(--spacing-16);
  }

  .faq-item .accordion-q {
    width: 22px;
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 28px;
  }

  .faq-item .accordion-title {
    font-size: 16px;
    line-height: 1.5;
  }

  .faq-item .accordion-chevron {
    width: 20px;
    height: 20px;
    margin-left: var(--spacing-4);   /* 질문↔화살표 16 (gap12 + 4) */
  }

  .faq-item .accordion-answer {
    padding: 0 var(--spacing-16) var(--spacing-24) var(--spacing-48);
    font-weight: 400;
    font-size: 15px;
  }

  .faq-item .accordion-answer p,
  .faq-item .accordion-answer li {
    font-weight: 400;
    font-size: 15px;
  }

  /* InfoBox — 세로 스택 (시안 1820:54542): ⓘ24+제목18, 버튼 하단 풀너비, radius 16 */
  .faq-infobox {
    gap: var(--spacing-28);   /* 안내(intro) ↔ 문의처 ↔ 버튼 각 28 */
    margin: var(--spacing-40) var(--spacing-16) 0;   /* 페이지네이션↔InfoBox 40 */
    padding: var(--spacing-16) var(--spacing-16) var(--spacing-20);
    border-radius: var(--radius-medium);
  }

  /* 상단 래퍼 해체 → intro·버튼이 카드 직속 플렉스 아이템으로 세로 배치 */
  .faq-infobox-top {
    display: contents;
  }

  .faq-infobox-intro {
    order: 1;
    gap: var(--spacing-12);   /* 제목 ↔ 설명 */
  }

  .faq-infobox-contact {
    order: 2;
    gap: var(--spacing-8);
    padding-left: 0;
  }

  .faq-infobox-button {
    order: 3;
    width: 100%;
    height: 32px;
    padding: 0 14px 0 var(--spacing-16);   /* pr14 시안 원값 */
    font-size: 13px;
  }

  .faq-infobox-button::after {
    width: 16px;
    height: 16px;
  }

  .faq-infobox-headline {
    gap: var(--spacing-4);   /* 아이콘 ↔ 제목 */
  }

  .faq-infobox-icon {
    width: 24px;
    height: 24px;
  }

  .faq-infobox-title {
    font-size: 18px;
  }

  .faq-infobox-desc {
    padding-left: 0;   /* MO는 전폭 (아이콘 들여쓰기 없음) */
    font-size: 14px;
  }

  /* 문의처 (MO: 라벨 w56·값14·구분선 gray-80·영업시간 2줄) */
  .faq-infobox-contact-row {
    gap: 10px;   /* 시안 원값 */
  }

  .faq-infobox-contact-label {
    width: 56px;
    font-size: 14px;
  }

  .faq-infobox-contact-value {
    font-size: 14px;
  }

  .faq-infobox-contact-value--hours {
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;   /* MO: 평일…시간 / (점심…) 2줄 */
  }

  .faq-infobox-contact-divider {
    background-color: var(--color-gray-80);   /* MO 구분선 = gray-80(#ccc) */
  }

  .faq-infobox-contact-note {
    font-size: 14px;
  }
}