/* 홈페이지 메인 — PUBLIC 대시보드 템플릿을 CSS grid 로 정적 렌더 (GridStack 12컬럼 좌표 그대로) */
.www-main-page .www-main { padding-top: 16px; }
.www-main-page .www-container { max-width: 1232px; }   /* 내부 1200px = 편집기 PUBLIC 폭 */
/* GridStack 과 동일 기하: 행 피치 = 셀 높이(40px, 간격 0), 아이템 안쪽 4px 여백(=margin 8) → 편집기와 픽셀 단위 일치 */
.www-dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; }
.www-dash-item { padding: 4px; }
.www-dash-item { min-width: 0; min-height: 0; }
.www-dash-card { height: 100%; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #e3e3e3; border-radius: 4px; }
.www-dash-card.no-header { border: 1px solid transparent; background: transparent; }  /* 편집기 카드 1px 테두리와 동일 */
.www-dash-head { padding: 6px 10px; background: #f6f7f9; border-bottom: 1px solid #e3e3e3; font-weight: 700; font-size: 14px; }
.www-dash-body { flex: 1; min-height: 0; overflow: hidden; }
.www-dash-card.no-header .www-dash-body { overflow: hidden; }
.www-widget { height: 100%; }
.www-page-block img { max-width: 100%; height: auto; }
.www-page-block p { margin: 0; }
/* 슬라이더 */
.www-slider { position: relative; height: 100%; overflow: hidden; }
.www-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.www-slide.active { opacity: 1; }
.www-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.www-slide-caption { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); color: #fff; padding: 6px 10px; font-size: 13px; }
/* 썸네일 스트립 */
.www-thumb-strip { display: flex; gap: 8px; overflow-x: auto; height: 100%; align-items: center; padding: 4px; }
.www-thumb { flex: 0 0 auto; width: 110px; }
.www-thumb img { width: 110px; height: 70px; object-fit: cover; border: 1px solid #e3e3e3; display: block; }
.www-thumb-title { display: block; font-size: 11px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 최신글 */
.www-board-recent { padding: 6px 10px; overflow: hidden; }
.www-board-recent-head { text-align: right; font-size: 12px; }
.www-board-recent-more { color: #888; }
.www-board-recent-list { list-style: none; margin: 0; padding: 0; }
.www-board-recent-list li { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px dotted #e3e3e3; font-size: 13px; }
.www-board-recent-list li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #444; }
.www-board-recent-list li .d { color: #999; font-size: 12px; white-space: nowrap; }
@media (max-width: 767px) {
  .www-dash-grid { display: block; }
  .www-dash-item { margin-bottom: 10px; }
  .www-dash-item .www-dash-card { min-height: 160px; }
}

/* ---------- 이미지 위젯 공통 (fit) ---------- */
.www-img-box { width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; }
.www-img-box a { display: block; width: 100%; height: 100%; }
.www-img-box img { width: 100%; height: 100%; display: block; }
/* fit: contain=원본비율 유지 / fill=채우기(비율 무시) / width=가로 맞춤(아래 잘림·남음) / height=세로 맞춤(좌우 잘림·남음) / cover=덮기(비율 유지, 잘림) */
.fit-contain img { width: 100%; height: 100%; object-fit: contain; object-position: top center; }
.fit-fill img    { width: 100%; height: 100%; object-fit: fill; }
.fit-cover img   { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.fit-width img   { width: 100%; height: auto; max-height: none; object-fit: unset; display: block; }
.fit-height      { display: flex; justify-content: center; align-items: flex-start; overflow: hidden; }
.fit-height img  { height: 100%; width: auto; max-width: none; object-fit: unset; display: block; }
.www-slide.fit-height { display: block; }
.www-slide.fit-height img { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.www-slide.fit-width img { position: absolute; left: 0; top: 0; }
/* 슬라이드 문구 오버레이 */
.www-slide-text { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 8%; pointer-events: none; }
.www-slide-text h2 { font-size: 44px; font-weight: 800; margin: 0 0 8px; letter-spacing: -1px; text-shadow: 0 1px 3px rgba(0,0,0,.25); }
.www-slide-text p { font-size: 16px; margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.www-slide-text.text-light { color: #fff; }
.www-slide-text.text-dark { color: #444; text-shadow: none; }
.www-slide-text.align-left { text-align: left; } .www-slide-text.align-center { text-align: center; } .www-slide-text.align-right { text-align: right; }
.www-slider-dots { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; z-index: 2; }
.www-slider-dots span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.6); margin: 0 3px; cursor: pointer; }
.www-slider-dots span.active { background: #c9302c; }
/* 이미지 링크 묶음 — 헤더(자연 높이) + 아이콘 그리드(남은 높이를 행 수로 분할, 아이콘은 셀 높이에 맞춤), 페이지 초과분은 슬라이드 */
.www-image-links { display: flex; flex-direction: column; height: 100%; }
.www-image-links-header { flex: 0 0 auto; }
.www-image-links-header img { width: 100%; height: auto; display: block; }
.www-image-links-pages { flex: 1 1 auto; min-height: 0; position: relative; }
.www-image-links-grid { display: grid; width: 100%; height: 100%; }
.www-image-links-grid.www-slide { position: absolute; inset: 0; }
.www-image-links-item { min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.www-image-links-item a { display: block; width: 100%; height: 100%; }
.www-image-links-item img { width: 100%; height: 100%; display: block; }
.www-image-links-item.fit-contain img { object-fit: contain; object-position: center; }
.www-image-links-item.fit-width img { height: auto; }
.www-image-links-item.fit-height img { width: auto; max-width: none; }
@media (max-width: 767px) { .www-slide-text h2 { font-size: 26px; } .www-slide-text p { font-size: 13px; } }