/*
 * gnu_emoticon_comment.css
 * 그누보드 댓글 이모티콘 플러그인 스타일
 */

/* ═══════════════════════════════════════════════════
   공통 (PC + 모바일)
═══════════════════════════════════════════════════ */

/* ── 댓글 본문에 출력되는 이모티콘 이미지 크기 제한 ────────── */
.rf-emoticon-view {
  display: inline-block;
  width: 80px;
  height: 80px;
  object-fit: contain;
  vertical-align: middle;
}

/* ── 이모티콘 버튼 ─────────────────────────────────────────── */
.gnu-emo-c-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  margin-top: 8px;        /* 위 요소와 간격 */
  margin-bottom: 8px;     /* textarea와 간격 */
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.gnu-emo-c-btn:hover { background: #f9fafb; }
.gnu-emo-c-btn img {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}

/* ── 모달 오버레이 ─────────────────────────────────────────── */
.gnu-emo-c-modal {
  display: none;
  position: fixed;
  inset: 0;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 16px 16px;
  background: rgba(0, 0, 0, .38);
  z-index: 99999;
}
.gnu-emo-c-modal.is-open { display: flex; }

/* ── 모달 박스 ─────────────────────────────────────────────── */
.gnu-emo-c-modal-box {
  width: min(520px, 96vw);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .22);
  overflow: hidden;
}

/* ── 헤더 ──────────────────────────────────────────────────── */
.gnu-emo-c-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 3;
}
.gnu-emo-c-title {
  font-size: 14px;
  font-weight: 800;
  color: #111827;
}
.gnu-emo-c-close {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.gnu-emo-c-close:hover { background: #f1f5f9; }
.gnu-emo-c-close img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* ── 패키지 스트립 ─────────────────────────────────────────── */
.gnu-emo-c-strip {
  display: flex;
  gap: 10px;
  padding: 12px 14px 10px;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid #f1f5f9;
  /*
   * touch-action: none → JS가 터치를 완전히 제어
   * PC·모바일 모두 드래그 로직이 동일하게 개입,
   * 슬라이드 후 버튼 click 억제도 확실히 동작
   */
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gnu-emo-c-strip::-webkit-scrollbar { display: none; }
.gnu-emo-c-strip.is-dragging { cursor: grabbing; }

/* ── 패키지 버튼 ───────────────────────────────────────────── */
.gnu-emo-c-pack-btn {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: #fff;
  padding: 0;
  cursor: pointer;
  touch-action: none;   /* 부모와 동일하게 JS 제어 */
  -webkit-tap-highlight-color: transparent;
}
.gnu-emo-c-pack-btn img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e5e7eb;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}
.gnu-emo-c-pack-btn.is-active { border-color: #3b82f6; }

/* ── 패키지 제목 ───────────────────────────────────────────── */
.gnu-emo-c-pack-title {
  padding: 10px 14px 6px;
  font-size: 13px;
  font-weight: 800;
  color: #111827;
}
.gnu-emo-c-expire {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #ef4444;
}

/* ── 이모티콘 그리드 ───────────────────────────────────────── */
.gnu-emo-c-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 14px 14px;
  max-height: 320px;
  overflow-y: auto;
}
.gnu-emo-c-item {
  display: grid;
  place-items: center;
  padding: 7px;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: background .1s;
  -webkit-tap-highlight-color: transparent;
}
.gnu-emo-c-item:hover { background: #f8fafc; }
.gnu-emo-c-item img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  pointer-events: none;
}

/* ── 빈 상태 ───────────────────────────────────────────────── */
.gnu-emo-c-empty {
  grid-column: 1 / -1;
  padding: 16px;
  color: #94a3b8;
  font-size: 13px;
  text-align: center;
}


/* ═══════════════════════════════════════════════════
   모바일 (768px 이하)
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* 버튼 — 터치 타겟 넉넉하게 */
  .gnu-emo-c-btn {
    padding: 9px 14px;
    font-size: 14px;
  }

  /* 모달 — 화면 하단에서 올라오는 시트 스타일 */
  .gnu-emo-c-modal {
    padding: 0;
    align-items: flex-end;    /* 하단 정렬 */
  }
  .gnu-emo-c-modal-box {
    width: 100%;
    border-radius: 20px 20px 0 0;  /* 상단 모서리만 둥글게 */
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .18);
    /* 모바일에서 키보드 올라와도 너무 크지 않게 */
    max-height: 75vh;
    display: flex;
    flex-direction: column;
  }

  /* 헤더 */
  .gnu-emo-c-header {
    padding: 14px 16px;
    flex-shrink: 0;
  }
  .gnu-emo-c-title { font-size: 15px; }

  /* 닫기 버튼 — 터치 타겟 확대 */
  .gnu-emo-c-close {
    width: 36px;
    height: 36px;
  }

  /* 패키지 스트립 — 버튼 간격 넉넉하게 */
  .gnu-emo-c-strip {
    gap: 12px;
    padding: 14px 16px 12px;
    flex-shrink: 0;
  }

  /* 패키지 버튼 — 터치하기 좋게 크게 */
  .gnu-emo-c-pack-btn {
    width: 52px;
    height: 52px;
  }

  /* 패키지 제목 */
  .gnu-emo-c-pack-title {
    padding: 10px 16px 6px;
    font-size: 13px;
    flex-shrink: 0;
  }

  /* 이모티콘 그리드 — 5열로 줄이고 스크롤 영역 확보 */
  .gnu-emo-c-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 10px 16px 24px; /* 하단 여백 넉넉히 (홈 인디케이터 대응) */
    max-height: none;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 이모티콘 아이템 — 터치 영역 확대 */
  .gnu-emo-c-item {
    padding: 9px;
    border-radius: 12px;
  }
  .gnu-emo-c-item img {
    width: 48px;
    height: 48px;
  }
}


/* ═══════════════════════════════════════════════════
   소형 모바일 (400px 이하, 갤럭시 폴드 등)
═══════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .gnu-emo-c-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .gnu-emo-c-pack-btn {
    width: 46px;
    height: 46px;
  }
  .gnu-emo-c-item img {
    width: 42px;
    height: 42px;
  }
}