/* ====================================================
   COM/accordion_stack — 아코디언형 스택 스킨
   각 항목 = 클릭하면 펼쳐지는 아코디언 패널.
   펼친 안에는 하위 위젯(grid_free / tab_inner / 중첩 accordion 등) 삽입 가능.
   ※ 디자인 세부값은 위젯 wid_css 로 덮어쓰기 가능
==================================================== */

.accordion_stack {
  --acc-radius: 16px;
  --acc-gap: clamp(12px, calc(0.62vw + 10px), 20px);
  --acc-bar-pad-y: clamp(18px, calc(0.78vw + 15.5px), 28px);
  --acc-bar-pad-x: clamp(20px, calc(1.17vw + 16.25px), 36px);
  /* ★ 펼침 내부 사방 통일 패딩 (헤더 바 좌우 패딩과 동일값 → 헤더-본문 좌우 정렬 일치) */
  --acc-panel-pad: clamp(20px, calc(1.17vw + 16.25px), 36px);
  --acc-primary: var(--primary, #f0473e);
  --acc-border: #e5e7eb;
  --acc-bar-bg: #ffffff;
  --acc-bar-color: #1f2937;
  --acc-panel-bg: #ffffff;
  display: block;
  width: 100%;
  position: relative;
}

.accordion_stack .contents-container { width: 100%; }

/* ─── 상단 스택 헤더 (선택) ─────────────────────── */
.accordion_stack .acc_stack_head {
  margin-bottom: clamp(20px, calc(1.56vw + 15px), 40px);
}
.accordion_stack .acc_head_title {
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.25;
  color: #111827;
  margin-bottom: 8px;
}
.accordion_stack .acc_head_sub {
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 400;
  line-height: 1.5;
  color: #6b7280;
}

/* ─── 아코디언 리스트 ───────────────────────────── */
.accordion_stack .acc_stack_list {
  display: flex;
  flex-direction: column;
  gap: var(--acc-gap);
  width: 100%;
}

.accordion_stack .acc_item {
  border: 1px solid var(--acc-border);
  border-radius: var(--acc-radius);
  background: var(--acc-bar-bg);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.accordion_stack .acc_item:hover {
  border-color: #d1d5db;
}
.accordion_stack .acc_item.open {
  border-color: #d1d5db;   /* 열림 시 테두리 — 연한 회색으로 (기존 primary 는 너무 진함) */
  box-shadow: 0 6px 24px rgba(0,0,0,0.05);
}

/* ─── 헤더 바 (클릭 영역) ───────────────────────── */
.accordion_stack .acc_bar {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1vw, 18px);
  width: 100%;
  padding: var(--acc-bar-pad-y) var(--acc-bar-pad-x);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--acc-bar-color);
  transition: background 0.2s ease;
}
.accordion_stack .acc_bar:hover { background: #f9fafb; }
.accordion_stack .acc_item.open .acc_bar { background: transparent; }

/* 헤더 아이콘 (이미지1) — 라운드 정사각 연한 회색 박스, 아이콘 중앙 배치 */
.accordion_stack .acc_bar_icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: clamp(44px, 3.4vw, 58px);
  height: clamp(44px, 3.4vw, 58px);
  padding: clamp(8px, 0.7vw, 12px);          /* 아이콘이 네모 안에서 여백 갖도록 */
  background: #f3f4f6;                         /* 연한 회색 배경 */
  border-radius: clamp(10px, 0.8vw, 14px);    /* 라운드 정사각 */
  overflow: hidden;
}
.accordion_stack .acc_bar_icon [class^="wg_img"] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.accordion_stack .acc_bar_icon img,
.accordion_stack .acc_bar_icon svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* 헤더 제목 */
.accordion_stack .acc_bar_title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.accordion_stack .acc_item.open .acc_bar_title { color: var(--acc-primary); }

/* 화살표 — 연한 회색 정원(배경만, 라인 없음) */
.accordion_stack .acc_bar_arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(36px, 2.8vw, 44px);
  height: clamp(36px, 2.8vw, 44px);
  border-radius: 50%;
  background: #f3f4f6;   /* 연한 회색 배경만, 테두리 없음 */
  color: #6b7280;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), background 0.2s ease, color 0.2s ease;
}
.accordion_stack .acc_bar:hover .acc_bar_arrow {
  background: #e5e7eb;
}
.accordion_stack .acc_bar_arrow svg {
  width: clamp(18px, 1.4vw, 22px);
  height: clamp(18px, 1.4vw, 22px);
}
.accordion_stack .acc_item.open .acc_bar_arrow {
  transform: rotate(180deg);
  color: #374151;   /* 진한 primary 대신 짙은 회색 */
}

/* ─── 펼침 패널 ─────────────────────────────────── */
.accordion_stack .acc_panel {
  height: 0;
  overflow: hidden;
  background: var(--acc-panel-bg);
  transition: height 0.35s cubic-bezier(0.22,1,0.36,1);
  will-change: height;
}
.accordion_stack .acc_panel[hidden] { display: none; }

/* ★ 펼침 내부 패딩 — 상하좌우 단일 변수(--acc-panel-pad)로 완전 통일
   display:flow-root → 내부 float 를 정확히 포함 + 자식 margin collapse 차단
   (이게 없으면 하위 위젯 float:left 때문에 패널이 높이를 못 잡아 위쪽 공간이 뜸) */
.accordion_stack .acc_panel_in {
  display: flow-root;
  padding: var(--acc-panel-pad);
  border-top: 1px solid #f1f3f5;
  box-sizing: border-box;
}

/* 펼친 내부 콘텐츠(하위 위젯) 컨테이너 — flow-root 로 float 포함 + 높이 정확 계산 */
.accordion_stack .acc_panel_in .grid_cont {
  display: flow-root;
  width: 100%;
  float: none;
}
/* 여러 콘텐츠 슬롯 세로 간격 */
.accordion_stack .acc_panel_in .grid_cont > * + * {
  margin-top: clamp(24px, calc(2.34vw + 16.5px), 54px);
}
/* ★ 하위 위젯이 자체로 만드는 좌우+상하 여백 전부 제거 → 아코디언 패딩만 적용 */
.accordion_stack .acc_panel_in .contents-container,
.accordion_stack .acc_panel_in .contentContainer {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;   /* 좌우뿐 아니라 상하 패딩까지 제거 (상단 공간 벌어짐 방지) */
  margin: 0 !important;
}
/* 하위 위젯 wg_side / wg_box 등의 앞뒤 자체 여백도 상쇄 + float 해제(높이 정확 계산) */
.accordion_stack .acc_panel_in .wg_side {
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  display: flow-root;
}
.accordion_stack .acc_panel_in > .grid_cont > * { float: none !important; }
/* grid_free 최상단 래퍼(.com_f / .COM_grid_free)도 float 해제 (padding 은 유지) */
.accordion_stack .acc_panel_in .com_f,
.accordion_stack .acc_panel_in [class*="COM_grid_free"] {
  float: none !important;
  margin-top: 0 !important;
}

/* ★ 콘텐츠 최상단 요소의 위쪽 여백 제거 (헤더-콘텐츠 사이 이중 공간 방지)
   ※ margin-top 만 제거. padding-top 은 건드리지 않음
     (wg_txt1 처럼 pill/박스형 요소의 상하 패딩은 디자인의 일부 → 죽이면 배지가 위로 뜸) */
.accordion_stack .acc_panel_in > .grid_cont > *:first-child,
.accordion_stack .acc_panel_in .grid_cont > *:first-child,
.accordion_stack .acc_panel_in .wg_side > *:first-child,
.accordion_stack .acc_panel_in .wg_box:first-child,
.accordion_stack .acc_panel_in .wg_box > .wg_box_in:first-child,
.accordion_stack .acc_panel_in .wg_box_in > *:first-child,
.accordion_stack .acc_panel_in .wg_txt_box:first-child,
.accordion_stack .acc_panel_in .wg_txt_box > *:first-child,
.accordion_stack .acc_panel_in .wg_img_box:first-child {
  margin-top: 0 !important;
}
/* 하위 위젯이 wg_side 없이 바로 wg_box 를 최상단으로 둘 때(gap flex) 위쪽 gap 상쇄 */
.accordion_stack .acc_panel_in .wg_box { margin-top: 0 !important; }

/* 관리자 안내 힌트 */
.accordion_stack .acc_empty_hint {
  padding: 24px;
  background: #fef3c7;
  border: 1px dashed #f59e0b;
  border-radius: 8px;
  color: #92400e;
  text-align: center;
  line-height: 1.6;
  font-size: 14px;
}
.accordion_stack .acc_empty_hint code {
  background: rgba(0,0,0,0.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* ─── 인라인 편집 표시 ─────────────────────────── */
.accordion_stack .wg_edit_txt,
.accordion_stack .wg_edit_title {
  cursor: pointer;
  transition: outline 0.15s ease;
}
.accordion_stack .wg_edit_txt:hover,
.accordion_stack .wg_edit_title:hover {
  outline: 1px dashed rgba(240,71,62,0.6);
  outline-offset: 2px;
}
.accordion_stack .acc_stack_setting_badge { z-index: 999999 !important; }

/* ─── 모바일 반응형 ─────────────────────────────── */
@media (max-width: 640px) {
  .accordion_stack {
    --acc-radius: 12px;
    --acc-bar-pad-y: 16px;
    --acc-bar-pad-x: 16px;
    --acc-panel-pad: 16px;   /* 모바일도 사방 통일 */
  }
  .accordion_stack .acc_bar_title { font-size: 16px; }
  .accordion_stack .acc_bar_icon { width: 34px; height: 34px; }
}