/* ===================================================================
   OOXOO Dashboard Reset (INTERNAL 전용 안정판 v4.2) — FULL OVERWRITE
   목적:
   - GridStack “구조 CSS”를 절대 깨지 않음 (position/inset/gutter)
   - 간격(7px)은 GridStack의 gutter(--gs-gutter)로 복구/고정
   - map(iframe)이 셀 높이를 정확히 100% 따라가도록 체인 고정
   - hover translate 제거(겹침/간격 침범 방지)
=================================================================== */

/* ------------------------------
   0) Reset
------------------------------ */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans KR", sans-serif;
  background: #f5f7fa;
  color: #222;
  line-height: 1.4;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ------------------------------
   1) Page Layout
------------------------------ */
.ooxoo-dashboard-page { width: 100%; padding-top: 20px; }

.ooxoo-dashboard-wrap {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 20px 15px 40px;
}

/* ------------------------------
   2) Header / Toolbar
------------------------------ */
.ooxoo-dashboard-header {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
}

.ooxoo-dashboard-title { font-size: 20px; font-weight: 700; }

.ooxoo-dashboard-actions { display: flex; gap: 10px; }

/* 버튼이 필요하면(레이아웃 저장 버튼 등) 최소 스타일 */
.ooxoo-btn {
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  border: none;
  background: #3478ff;
  color: #fff;
}
.ooxoo-btn:hover { background: #2f6de5; }

/* ------------------------------
   3) GridStack Core (절대 깨지면 안 됨)
   - gutter는 JS margin(7)과 동일하게 맞춤
------------------------------ */
.grid-stack{
  width: 100%;
  min-height: 600px;
  position: relative;

  /* ✅ 간격 복구의 핵심: gridstack gutter 변수 */
  --gs-gutter: 7px;
}

/* (GridStack 기본: 아이템은 absolute/transform 배치) */
.grid-stack > .grid-stack-item {
  min-width: 50px;
  min-height: 50px;
}

/*
  ✅ 간격(gutter)은 .grid-stack-item-content의 inset으로 만들어짐.
  따라서 아래 “구조”를 절대 relative로 바꾸면 안 됨.
*/
.grid-stack > .grid-stack-item > .grid-stack-item-content {
  position: absolute;
  inset: var(--gs-gutter);
}

/* ------------------------------
   4) Card UI (표현만 담당)
------------------------------ */
.grid-stack > .grid-stack-item > .grid-stack-item-content {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 3px 6px rgba(0,0,0,.08);
  overflow: hidden;

  /* ❌ translateY 같은 이동 금지(겹침/간격 침범 방지) */
  transition: box-shadow .25s ease;
}

.grid-stack > .grid-stack-item > .grid-stack-item-content:hover {
  box-shadow: 0 6px 12px rgba(0,0,0,.12);
}

/* 기본 카드 padding */
.grid-stack > .grid-stack-item:not([data-block="map"]) > .grid-stack-item-content {
  padding: 16px;
}

/* 텍스트 안정 */
.ooxoo-block-inner {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ------------------------------
   5) Map Block (Dashboard 내부 iframe)
   - gutter(inset)은 유지해야 간격이 살아남음
   - padding만 제거해서 “카드 안쪽 여백”만 없앰
------------------------------ */
.grid-stack > .grid-stack-item[data-block="map"] > .grid-stack-item-content {
  padding: 0;            /* ✅ 카드 내부 여백 제거 */
  overflow: hidden;      /* ✅ map이 밖으로 번지며 간격 덮는 것 방지 */
}

/* 지도 블록 내부 높이 체인 고정 */
.grid-stack > .grid-stack-item[data-block="map"] .ooxoo-block-inner {
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* 기존 템플릿(iframe 직접 들어가는 구조) 대응 */
.grid-stack > .grid-stack-item[data-block="map"] iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ------------------------------
   6) Drag Handle (지도 이동용)
   - JS가 .ooxoo-drag-handle을 삽입/사용하는 구조 가정
------------------------------ */
.grid-stack > .grid-stack-item[data-block="map"] > .grid-stack-item-content {
  position: absolute; /* 구조 유지 */
}

.ooxoo-drag-handle {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 0;
  background: rgba(0,0,0,.35);
  cursor: grab;
  z-index: 50;
  touch-action: none;
}

.ooxoo-drag-handle::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 9px;
  height: 2px;
  background: #fff;
  box-shadow: 0 5px 0 #fff, 0 10px 0 #fff;
}

.ooxoo-drag-handle:active { cursor: grabbing; }

/* ------------------------------
   7) Mobile
------------------------------ */
@media (max-width: 768px) {
  .ooxoo-dashboard-wrap { padding: 10px; }

  .grid-stack > .grid-stack-item:not([data-block="map"]) > .grid-stack-item-content {
    padding: 14px;
    border-radius: 12px;
  }

  .ooxoo-dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* 모바일: 페이지 스크롤 우선 */
  .grid-stack { touch-action: pan-y; }
}
/* =================================================
   🔴 GridStack gutter 복구 (필수)
   - 이게 없으면 블록 간격은 절대 생기지 않음
================================================= */
.grid-stack > .grid-stack-item > .grid-stack-item-content {
  position: absolute !important;
  inset: var(--gs-gutter, 7px) !important;
}