/* ===========================
   WISMAX blog.css (final, 2:2 & single-collage fix)
   =========================== */

/* --- 기본 리스트 정리 --- */
#bo_v_con ul, #bo_v_con ol {
  list-style-position: inside;
  padding-left: 0 !important;
  margin-left: 0 !important;
  text-align: center;
}
#bo_v_con ul ul, #bo_v_con ul ol,
#bo_v_con ol ul, #bo_v_con ol ol {
  list-style-type: disc !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
#bo_v_con li { list-style-type: disc; margin: .35em 0; }
#bo_v_con li > p.se-text-paragraph { display: inline; margin: 0; }
#bo_v_con .se-text-list-item-nested > ul { margin: 0 !important; padding: 0 !important; }
#bo_v_con .se-text-list { margin: .6em 0 !important; }

/* --- 공통 이미지 규칙 --- */
img { height: auto; }
.rn-content img { max-width: 100%; height: auto; display: block; }

/* ===========================
   NAVER imageGroup (2:2 기본 케이스)
   =========================== */

/* 컨테이너는 2열 플렉스 */
#bo_v_con .se-imageGroup-container{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 각 컬럼(아이템) 두 칸으로 배치 */
#bo_v_con .se-imageGroup-item{
  flex: 1 1 48%;
  display: block;                /* 아이템 안은 세로 스택 */
}

/* 2:2 케이스에서 각 타일을 동일 높이(4:3)로 맞춤 */
#bo_v_con .se-imageGroup-item.se-imageGroup-col-2 .se-module{
  position: relative;
  margin: 0 0 8px 0;
  padding: 0;
  aspect-ratio: 4 / 3;           /* ★ 필요시 3/2, 1/1 등으로 변경 */
  overflow: hidden;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9f9f9;
}
#bo_v_con .se-imageGroup-item.se-imageGroup-col-2 .se-module:last-child{
  margin-bottom: 0;
}
#bo_v_con .se-imageGroup-item.se-imageGroup-col-2 .se-module img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;             /* 채우면서 잘라냄(불균일 높이 방지) */
  display: block;
  border-radius: 6px;
}

/* ===========================
   NAVER imageGroup (단일 아이템 콜라주 케이스)
   =========================== */

/* 아이템이 1개뿐이면 그리드 콜라주로 전환 */
#bo_v_con .se-imageGroup-container:has(> .se-imageGroup-item:only-child){
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
/* 아이템 래퍼는 통과시켜 모듈들을 바로 그리드에 배치 */
#bo_v_con .se-imageGroup-container:has(> .se-imageGroup-item:only-child) > .se-imageGroup-item{
  display: contents;
}
/* 그리드 타일(단일 아이템 콜라주) */
#bo_v_con .se-imageGroup-container:has(> .se-imageGroup-item:only-child) .se-module{
  position: relative; margin: 0; padding: 0;
  aspect-ratio: 4 / 3;           /* ★ 4:3 고정(원하면 7/5, 3/2로) */
  overflow: hidden; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: #f9f9f9;
}
#bo_v_con .se-imageGroup-container:has(> .se-imageGroup-item:only-child) .se-module img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block; border-radius: 6px;
}

/* ===========================
   NAVER imageStrip (3칸)
   =========================== */
#bo_v_con .se-imageStrip-container.se-imageStrip-col-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
#bo_v_con .se-imageStrip-container img{
  width: 100%;
  height: auto;
  display: block;
}

/* --- 텍스트 정렬 유틸 --- */
.rn-ta-center { text-align: center !important; }
.rn-ta-left   { text-align: left   !important; }
.rn-ta-right  { text-align: right  !important; }

/* --- float 유틸 --- */
.rn-f-left  { float: left;  margin: 0 12px 8px 0; }
.rn-f-right { float: right; margin: 0 0 8px 12px; }

/* --- 이미지 폭 단계 --- */
.rn-img-w25  { width: 25%;  max-width: 25%; }
.rn-img-w40  { width: 40%;  max-width: 40%; }
.rn-img-w60  { width: 60%;  max-width: 60%; }
.rn-img-w80  { width: 80%;  max-width: 80%; }
.rn-img-w100 { width: 100%; max-width: 100%; }

/* --- 표 --- */
.rn-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rn-table { width: 100%; border-collapse: collapse; }
.rn-table th, .rn-table td { border: 1px solid #e5e7eb; padding: .6rem .8rem; word-break: keep-all; }
.rn-table th { background: #f8fafc; font-weight: 600; }

/* --- figure --- */
figure.rn-ta-center img { margin-left: auto; margin-right: auto; }

/* --- 반응형 --- */
@media (max-width: 768px){
  /* 2:2 → 1열 */
  #bo_v_con .se-imageGroup-item{ flex-basis: 100%; }
  /* 단일 콜라주는 2열 유지 */
  #bo_v_con .se-imageGroup-container:has(> .se-imageGroup-item:only-child){
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px){
  .rn-f-left, .rn-f-right { float: none; margin: 8px auto; }
  .rn-img-w25, .rn-img-w40, .rn-img-w60, .rn-img-w80, .rn-img-w100 { width: 100%; max-width: 100%; }
}
@media (max-width: 480px){
  /* 단일 콜라주 아주 좁으면 1열 */
  #bo_v_con .se-imageGroup-container:has(> .se-imageGroup-item:only-child){
    grid-template-columns: 1fr;
  }
}
/* --- 단일 이미지 섹션(네이버 se-section-image) 확실한 가운데 정렬 --- */
#bo_v_con .se-section-image{
  max-width: 900px;          /* 필요시 조정 */
  margin: 12px auto;         /* 컨테이너 자체를 가운데 */
  text-align: center;        /* 앵커가 inline일 때 대비 */
}

#bo_v_con .se-section-image .se-module,
#bo_v_con .se-section-image .se-module-image,
#bo_v_con .se-section-image .se-module-image a{
  display: block;            /* 인라인 여백/정렬 이슈 방지 */
  float: none !important;    /* 혹시 다른 곳에서 float 걸렸을 대비 */
}

#bo_v_con .se-section-image img{
  max-width: 100%;
  height: auto;
  display: block;            /* 이미지 박스로 만들고 */
  margin-left: auto;         /* 좌우 자동 마진으로 */
  margin-right: auto;        /* 정확히 가운데 정렬 */
}