/* [ITGO-F2] 콜라주 레이아웃
 *
 * 본문에 저장되는 마크업(클래스 기반 — HTMLPurifier 가 인라인 grid 를 지우므로 style 을 쓰지 않는다):
 *
 *   <div class="itgo-collage itgo-collage--4a">
 *     <div class="itgo-collage__cell"><img src="..." alt=""></div>   × N (2~6)
 *   </div>
 *
 * 이 파일은 세 곳에서 같이 쓴다.
 *   1. 조회 화면(head.sub.php 에서 로드)
 *   2. 에디터 편집 영역(에디터 iframe/본문에 주입)
 *   3. 사진 첨부 팝업의 레이아웃 선택 시트(미리보기)
 *
 * 시안(docs/02-findings 콜라주 시안 2026-09-18 v1): 2~6장 × 3종(A 가 기본),
 * 전체 정사각(1:1) · 본문 너비 100% · 셀 간격 4px · 모서리 없음(10-02, 기존 8px) · object-fit: cover
 */

.itgo-collage {
  display: grid;
  gap: 4px;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 8px 0;
  /* [10-02] 둥근 모서리 제거(사용자 요청) — 기존 8px */
  overflow: hidden;
  box-sizing: border-box;
  background: transparent;
}

/* [UI3] 조회 화면에서는 콜라주 블록도 단일 이미지처럼 게시판 이미지 폭(기본 600)으로 제한 —
   본문 전체 폭(예: 데스크톱 1157)으로 늘리면 안의 600px 썸네일이 확대돼 흐려진다.
   편집기(content_css)에는 #bo_v_con 래퍼가 없어 영향 없음. 모바일은 본문 폭이 600 미만이라 그대로 꽉 참. */
#bo_v_con .itgo-collage,
.itgo-board-view__content .itgo-collage {
  max-width: var(--itgo-collage-view-width, 600px) !important;
}

.itgo-collage__cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #e5e1da;
}

/* 조회 화면에서 get_view_thumbnail() 이 img 를 a.view_image 로 감싼다 → 링크도 셀을 꽉 채운다 */
.itgo-collage__cell > a,
.itgo-collage__cell > a.view_image {
  display: block !important;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
}

/* 스킨의 #bo_v_con img {max-width:100%;height:auto !important} 와 에디터가 넣는 width/height 속성을 모두 이긴다
 *   (id 선택자를 앞에 붙여 common.css 의 F1 규칙보다 우선순위를 높인다) */
.itgo-collage__cell img,
#bo_v_con .itgo-collage__cell img,
.itgo-board-view__content .itgo-collage__cell img,
.editor_content .itgo-collage__cell img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover;
  -o-object-fit: cover;
}

/* aspect-ratio 미지원(2021년 이전 브라우저) — 행 높이를 고정해 최소한 깨지지 않게 */
@supports not (aspect-ratio: 1 / 1) {
  .itgo-collage {
    grid-auto-rows: 160px;
  }
}

/* ── 2장 ─────────────────────────────────────────────── */
.itgo-collage--2a { grid-template-columns: 1fr 1fr; }                       /* 좌우 균등 (기본) */
.itgo-collage--2b { grid-template-rows: 1fr 1fr; }                          /* 상하 균등 */
.itgo-collage--2c { grid-template-columns: 2fr 1fr; }                       /* 좌 강조 2:1 */

/* ── 3장 ─────────────────────────────────────────────── */
.itgo-collage--3a { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }          /* 좌 1 + 우 2 (기본) */
.itgo-collage--3a .itgo-collage__cell:nth-child(1) { grid-row: 1 / 3; }
.itgo-collage--3b { grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; }          /* 상 1 + 하 2 */
.itgo-collage--3b .itgo-collage__cell:nth-child(1) { grid-column: 1 / 3; }
.itgo-collage--3c { grid-template-columns: repeat(3, 1fr); }                                /* 3열 균등 */

/* ── 4장 ─────────────────────────────────────────────── */
.itgo-collage--4a { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }          /* 2×2 격자 (기본) */
.itgo-collage--4b { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr); }   /* 좌 1 + 우 3 */
.itgo-collage--4b .itgo-collage__cell:nth-child(1) { grid-row: 1 / 4; }
.itgo-collage--4c { grid-template-columns: repeat(3, 1fr); grid-template-rows: 2fr 1fr; }   /* 상 1 + 하 3 */
.itgo-collage--4c .itgo-collage__cell:nth-child(1) { grid-column: 1 / 4; }

/* ── 5장 ─────────────────────────────────────────────── */
.itgo-collage--5a { grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 1fr; }   /* 상 2 + 하 3 (기본) */
.itgo-collage--5a .itgo-collage__cell:nth-child(1) { grid-column: 1 / 4; }
.itgo-collage--5a .itgo-collage__cell:nth-child(2) { grid-column: 4 / 7; }
.itgo-collage--5a .itgo-collage__cell:nth-child(n+3) { grid-column: span 2; }
.itgo-collage--5b { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }      /* 좌 1 + 우 4 */
.itgo-collage--5b .itgo-collage__cell:nth-child(1) { grid-row: 1 / 3; }
.itgo-collage--5c { grid-template-columns: repeat(4, 1fr); grid-template-rows: 2fr 1fr; }   /* 상 1 + 하 4 */
.itgo-collage--5c .itgo-collage__cell:nth-child(1) { grid-column: 1 / 5; }

/* ── 6장 ─────────────────────────────────────────────── */
.itgo-collage--6a { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }   /* 3×2 격자 (기본) */
.itgo-collage--6b { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); }   /* 2×3 격자 */
.itgo-collage--6c { grid-template-columns: repeat(4, 1fr); grid-template-rows: 2fr 1fr; }   /* 상 2 + 하 4 */
.itgo-collage--6c .itgo-collage__cell:nth-child(-n+2) { grid-column: span 2; }

/* ── 레이아웃 선택 시트(팝업·에디터 공용) ───────────────── */
.itgo-collage-sheet {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', system-ui, sans-serif;
}
.itgo-collage-sheet[hidden] { display: none !important; }
.itgo-collage-sheet__panel {
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;              /* 스크롤은 __body 안에서만 — 둥근 모서리 유지 */
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 16px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
}
@media (min-width: 640px) {
  .itgo-collage-sheet { align-items: center; }
  .itgo-collage-sheet__panel { border-radius: 16px; }
}
.itgo-collage-sheet__title { flex: 0 0 auto; margin: 0 16px 2px; font-size: 18px; font-weight: 700; color: #191919; }
.itgo-collage-sheet__desc { flex: 0 0 auto; margin: 0 16px 12px; font-size: 13px; color: #6b6b6b; }
/* 가운데 스크롤 영역: 얇은 스크롤바, 좌우 여백 안쪽에 위치 */
.itgo-collage-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 16px 4px;
  scrollbar-width: thin;
  scrollbar-color: #d0d0d0 transparent;
}
.itgo-collage-sheet__body::-webkit-scrollbar { width: 6px; }
.itgo-collage-sheet__body::-webkit-scrollbar-track { background: transparent; }
.itgo-collage-sheet__body::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 3px; }
.itgo-collage-sheet__body::-webkit-scrollbar-thumb:hover { background: #b8b8b8; }
.itgo-collage-sheet__options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.itgo-collage-sheet__option {
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 6px;
  background: transparent;
  cursor: pointer;
  text-align: center;
  font: inherit;
  color: #6b6b6b;
}
.itgo-collage-sheet__option[aria-pressed="true"] { border-color: #b8863b; color: #b8863b; font-weight: 700; }
.itgo-collage-sheet__option .itgo-collage { margin: 0 0 6px; border-radius: 6px; pointer-events: none; }
.itgo-collage-sheet__option .itgo-collage__cell { background: #d9d2c7; }
.itgo-collage-sheet__option span { display: block; font-size: 12px; line-height: 1.3; }
.itgo-collage-sheet__preview { background: #faf9f6; border-radius: 12px; padding: 12px; margin-bottom: 4px; }
.itgo-collage-sheet__preview-label { font-size: 12px; font-weight: 700; color: #191919; margin: 0 0 8px; }
.itgo-collage-sheet__preview .itgo-collage { margin: 0; }
.itgo-collage-sheet__actions { flex: 0 0 auto; display: flex; gap: 10px; margin: 0 16px; padding-top: 12px; border-top: 1px solid #ececec; }
.itgo-collage-sheet__btn {
  flex: 1;
  height: 46px;
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.itgo-collage-sheet__btn--cancel { background: #fff; color: #191919; border: 1px solid #d7d7d7; }
.itgo-collage-sheet__btn--ok { background: #b8863b; color: #fff; border: 0; flex: 1.4; }
.itgo-collage-sheet__btn:disabled { opacity: 0.5; cursor: default; }