/* CKEditor 이미지 가운데 정렬 보정 (프론트 전용) */
.post-content figure.image { /* CKEditor가 생성하는 figure 래퍼 */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.post-content figure.image.image-style-align-center, /* CKEditor5 align center */
.post-content figure.align-center { 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.post-content figure.image > img,
.post-content figure.image.image-style-align-center > img,
.post-content p[style*="text-align:center"] > img,
.post-content p.text-center > img,
.post-content p > img,
.post-content img { /* 단일 이미지도 가운데 정렬 */
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    max-width: 100%;
}
/* CKEditor에서 남는 float 제거 (센터 정렬 시) */
.post-content .image-style-align-center img { float: none !important; }

/* 공통: notice_detail와 event_detail 모두에 적용 (두 페이지 모두 notice-content 래퍼 사용) */
.post-content figure.image.image_resized { /* CKEditor 5 이미지 리사이즈 플러그인 대응 */
    margin-left: auto !important;
    margin-right: auto !important;
}
.post-content div[style*="text-align:center"] img { /* 인라인 스타일 케이스 */
    margin-left: auto !important;
    margin-right: auto !important;
}
/* ===============================
   Accordion
================================ */
.accordion-content {
  display: none;
}

.accordion-item.active+.accordion-content {
  display: block;
}


/* ===============================
   Grid Containers (Base)
   - container1 / container2 동일 베이스
   - container3 별도
================================ */
.container1,
.container2 {
  grid-template-areas:
    'a b'
    'c b';
}

.container3 {
  grid-template-areas:
    'a b'
    'c b';
}


/* ===============================
   Items: container1
================================ */
.title1 {
  grid-area: a;
  align-self: end;
}

.subtext1 {
  grid-area: c;
  align-self: start;
}

.thumb1 {
  grid-area: b;
}


/* ===============================
   Items: container2 (Base)
   - 데스크톱(801px+)에서 레이아웃 재정의됨
================================ */
.title2 {
  grid-area: a;
  align-self: end;
}

.subtext2 {
  grid-area: c;
  align-self: start;
}

.thumb2 {
  grid-area: b;
}


/* ===============================
   Items: container3
================================ */
.title3 {
  grid-area: b;
  align-self: end;
}

.subtext3 {
  grid-area: d;
  align-self: start;
}

.thumb3 {
  grid-area: c;
  justify-content: start;
}

.frontline {
  grid-area: a;
}

.backline {
  grid-area: f;
  align-self: end;
}


/* ===============================
   Mobile (≤800px)
================================ */
@media (max-width: 1023px) {

  .container1,
  .container2 {
    grid-template-columns: 1fr;
    grid-template-areas:
      'a'
      'b'
      'c';
  }

  .container3 {
    grid-template-columns: 1fr;
    grid-template-areas:
      'a'
      'b'
      'c'
      'd'
      'f';
  }
}


/* ===============================
   Desktop (≥801px)
   - container2: 레이아웃/영역 재지정
   - container3: 세로 스택 + 좌측 고정 썸네일
================================ */
@media (min-width: 1024px) {

  /* container2: 
     a | b
     a | c
  */
  .container2 {
    grid-template-areas:
      'a b'
      'a c';
  }

  .title2 {
    grid-area: b;
    align-self: end;
  }

  .subtext2 {
    grid-area: c;
    align-self: start;
  }

  .thumb2 {
    grid-area: a;
    justify-content: start;
  }

  /* container3:
     c | a
     c | b
     c | d
     c | f
  */
  .container3 {
    grid-template-areas:
      'c a'
      'c b'
      'c d'
      'c f';
  }
}



/* 숨김 & 기본 */
.tab-scope input[name="tab_item"] {
  display: none;
}

.tab_content {
  display: none;
}

/* 컨텐츠 표시 */
.tab_content.active {
  display: block;
  animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 데스크탑 기본 탭 스타일 */
.tab_item {
  color: #AAAAAA;
  font-weight: 500;
  font-size: 20px;
  background: none;
  border: none;
  padding: 0;
  transition: color 0.3s ease;
}

/* 활성 라벨(데스크탑) */
.tab_item.active {
  color: #AE2F28;
  font-weight: 600;
  font-size: 20px;
  padding-bottom: 2px;
  border-bottom: 2px solid #AE2F28;
}

/* ▼ 모바일 전용 버튼형 */
@media (max-width: 1023px) {
  .tabs {
    justify-content: flex-start;
    background-color: white;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    padding-bottom: 5px;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
  }

  .tabs::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  .tabs:active {
    cursor: grabbing;
  }

  .tab_item {
    color: #AAAAAA;
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 2px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* 활성 라벨(모바일): 버튼형 */
  .tab_item.active {
    color: #AE2F28;
    font-weight: 600;
    font-size: 16px;
    border: none;
  }
}

/* 탭 컨테이너 정렬 */
.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* 모바일: 왼쪽 정렬 */
  align-items: flex-start;
}

/* 탭 컨테이너 가로 스크롤 (데스크탑/모바일 공통) */
.tab-container {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.tab-container::-webkit-scrollbar {
  display: none;
}

.tab-container:active {
  cursor: grabbing;
}

@media (min-width: 1024px) {
  .tabs {
    justify-content: center;
  }
  
  /* 데스크탑에서 탭이 넘칠 때만 왼쪽 정렬로 변경되도록 (선택 사항) */
  .tab-container {
    justify-content: flex-start;
  }
}

/* ✔ 전역 방식(권장): 향후 ID 바뀌어도 유지됨 */
.root_daum_roughmap,
.root_daum_roughmap>div,
.root_daum_roughmap iframe {
  width: 100% !important;
}

#daumRoughmapContainer1756356346185 .wrap_map,
#daumRoughmapContainer1756356346185 .wrap_map .map_root,
#daumRoughmapContainer1756356346185 .wrap_map .map_border {
  height: 100% !important;
}


  .text-wipe {
   /* 빨간색(진행될 색) 50%, 회색(기본 색) 50% */
                background: linear-gradient(to right, #3c3c3c 50%, #cfd8dc 50%);
                background-size: 200% 100%;
                background-position: 100% 0;
                /* 처음엔 오른쪽(회색) 영역만 보이게 설정 */
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                color: transparent;

                /* 핵심! 줄바꿈(<br>)이 있어도 그라데이션이 정상적으로 연결되게 함 */
                -webkit-box-decoration-break: clone;
                box-decoration-break: clone;
            }

            /* 애니메이션 클래스 */
            .animate-wipe {
                animation: wipeColor 1.5s ease-out forwards;
            }

            /* 배경 위치를 이동시켜 색상이 칠해지는 효과 */
            @keyframes wipeColor {
                0% {
                    background-position: 100% 0;
                    /* 회색 */
                }

                100% {
                    background-position: 0 0;
                    /* 빨간색 */
                }
            }