/**
 * [간소화 댓글 플러그인]
 * - 역할: 디자인시스템 §16 COMMENT UI
 * - 작성/수정일: 2026-08-08
 */

#bo_vc.an-c-section,
.an-c-root {
  color: var(--title-color, #171717);
  font-size: var(--fs-body, 15px);
}

.an-c-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 12000;
  transform: translateX(-50%);
  padding: 12px 18px;
  border-radius: var(--radius-sm, 5px);
  background: rgba(23, 23, 23, 0.92);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
}

/* Head */
.an-c-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color, #e5e5e5);
  margin-bottom: 0;
}

.an-c-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--title-color, #171717);
}

.an-c-title strong {
  font-weight: 700;
}

.an-c-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 14px;
}

.an-c-mine {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color, #444);
  cursor: pointer;
}

.an-c-mine input {
  width: 14px;
  height: 14px;
  accent-color: var(--primary-color, #171717);
  cursor: pointer;
}

.an-c-sort-tabs {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.an-c-sort-tab {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-color, #444);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.an-c-sort-tab.is-active {
  color: var(--title-color, #171717);
  font-weight: 600;
}

.an-c-sort-sep {
  width: 1px;
  height: 11px;
  background: var(--divider-color, #ddd);
}

.an-c-sort-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-sm, 5px);
  background: transparent;
  color: var(--muted-color, #7c7c7c);
  cursor: pointer;
}

.an-c-sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 120px;
  padding: 6px 0;
  border: 1px solid var(--border-color, #e5e5e5);
  border-radius: var(--radius-sm, 5px);
  background: var(--white-color, #fff);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.08));
}

.an-c-sort-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--text-color, #444);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.an-c-sort-item:hover,
.an-c-sort-item.is-active {
  background: var(--section-bg-color, #f7f7f7);
  color: var(--title-color, #171717);
  font-weight: 600;
}

.an-c-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 140px;
  padding: 6px 10px;
  border: 1px solid var(--border-color, #e5e5e5);
  border-radius: var(--radius-sm, 5px);
  color: var(--muted-color, #7c7c7c);
  font-size: 12px;
}

.an-c-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--title-color, #171717);
  font-size: 12px;
}

/* List items */
.an-c-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.an-c-item {
  display: flex;
  gap: 12px;
  padding: 20px 0;
  border-top: 1px solid var(--border-color, #e5e5e5);
}

.an-c-item:first-child {
  border-top: 0;
}

.an-c-avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--section-bg-color, #f7f7f7);
  border: 1px solid var(--border-color, #e5e5e5);
}

.an-c-item--reply {
  margin-left: calc(44px + (var(--an-c-depth, 1) - 1) * 18px);
  padding-top: 16px;
  padding-bottom: 8px;
  padding-left: 18px;
  border-top: 0;
  border-left: 2px solid var(--border-color, #e5e5e5);
}

.an-c-item--reply .an-c-avatar {
  width: 28px;
  height: 28px;
}

.an-c-body {
  flex: 1;
  min-width: 0;
}

.an-c-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.an-c-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--title-color, #171717);
}

.an-c-grade {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--chip-color, #f0f0f0);
  color: var(--text-color, #444);
}

.an-c-grade--op {
  background: transparent;
  border: 1px solid var(--primary-color, #171717);
  color: var(--title-color, #171717);
}

.an-c-time {
  font-size: 12px;
  color: var(--muted-color, #7c7c7c);
}

.an-c-content {
  font-size: 14px;
  line-height: 1.75;
  color: var(--title-color, #171717);
  word-break: break-word;
}

.an-c-content p {
  margin: 0 0 0.6em;
}

.an-c-content p:last-child {
  margin-bottom: 0;
}

.an-c-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm, 5px);
}

.an-c-content .mention,
.an-c-content a[data-mention] {
  font-weight: 600;
  background: var(--chip-color, #f0f0f0);
  padding: 2px 6px;
  border-radius: 4px;
}

.an-c-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.an-c-actions-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.an-c-reply-btn {
  padding: 8px 14px;
  border: 1px solid var(--border-color, #e5e5e5);
  border-radius: 5px;
  background: transparent;
  color: var(--title-color, #171717);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s;
}

.an-c-reply-btn:hover {
  border-color: var(--primary-color, #171717);
}

.an-c-mini-btn {
  padding: 6px 10px;
  border: 0;
  background: transparent;
  color: var(--muted-color, #7c7c7c);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.an-c-mini-btn:hover {
  color: var(--title-color, #171717);
}

.an-c-like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-color, #444);
  font-size: 12.5px;
  cursor: pointer;
}

.an-c-like.is-active {
  color: var(--title-color, #171717);
}

.an-c-like:disabled {
  opacity: 0.45;
  cursor: default;
}

.an-c-like .bi {
  font-size: 15px;
  line-height: 1;
}

.an-c-like-count {
  font-style: normal;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.an-c-inline-slot:empty {
  display: none;
}

.an-c-inline-slot:not(:empty) {
  display: block;
  margin-top: 14px;
}

/* More / paging */
.an-c-more-wrap {
  display: flex;
  justify-content: center;
  padding: 18px 0 8px;
  border-top: 1px solid var(--border-color, #e5e5e5);
}

.an-c-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0;
  background: transparent;
  color: var(--title-color, #171717);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.an-c-paging {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 20px 0 8px;
}

.an-c-page-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-color, #e5e5e5);
  border-radius: 999px;
  background: var(--white-color, #fff);
  color: var(--text-color, #444);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.an-c-page-btn.is-active {
  background: var(--primary-color, #171717);
  border-color: transparent;
  color: var(--white-color, #fff);
}

.an-c-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.an-c-status {
  padding: 28px 8px;
  text-align: center;
  color: var(--muted-color, #7c7c7c);
  font-size: 14px;
}

/* Compose */
.an-c-compose-wrap {
  margin-top: 22px;
}

.an-c-compose {
  border: 1px solid var(--border-color, #e5e5e5);
  border-radius: 6px;
  padding: 18px 20px 14px;
  background: var(--white-color, #fff);
}

.an-c-compose-host {
  position: relative;
  min-height: 72px;
}

/* Gurumi Placeholder 확장만 사용 — 커스텀 겹침 방지 */
.an-c-compose-ph {
  display: none !important;
}

.an-c-compose-host .ProseMirror,
.an-c-compose-host .tiptap,
.an-c-compose-host [contenteditable='true'] {
  min-height: 72px;
  outline: none;
  font-size: 14px;
  line-height: 1.7;
  color: var(--title-color, #171717);
}

.an-c-compose-host .ProseMirror p,
.an-c-compose-host .tiptap p {
  margin: 0 0 0.4em;
}

/**
 * [미디어 미리보기]
 * - 역할: 에디터 본문 이미지·유튜브는 숨기고 하단 썸네일만 노출
 * - 작성/수정일: 2026-08-08
 */
.an-c-compose-host .ProseMirror img,
.an-c-compose-host .ProseMirror iframe,
.an-c-compose-host .ProseMirror [data-youtube-video],
.an-c-compose-host .ProseMirror .editor-youtube,
.an-c-compose-host .ProseMirror [data-resize-container] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.an-c-media-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 0 4px;
}

.an-c-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--section-bg-color, #f7f7f7);
  border: 1px solid var(--border-color, #e5e5e5);
}

.an-c-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.an-c-thumb-video {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--title-color, #171717);
  font-size: 22px;
  background: linear-gradient(135deg, #ececec, #d9d9d9);
}

.an-c-thumb-del {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(23, 23, 23, 0.75);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

.an-c-compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
}

.an-c-media {
  display: flex;
  align-items: center;
  gap: 10px;
}

.an-c-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-color, #444);
  font-size: 18px;
  cursor: pointer;
}

.an-c-icon-btn:hover,
.an-c-icon-btn.is-active {
  background: var(--section-bg-color, #f0f4ff);
  color: #2f6fed;
}

.an-c-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.an-c-btn {
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.an-c-btn-submit {
  background: var(--primary-color, #171717);
  color: var(--white-color, #fff);
}

.an-c-btn-submit.is-soft,
.an-c-btn-submit:disabled {
  background: var(--chip-color, #f0f0f0);
  color: #7c7c7c;
  cursor: default;
}

.an-c-btn-ghost {
  background: transparent;
  border-color: var(--border-color, #e5e5e5);
  color: var(--text-color, #444);
}

/* Emoji panel */
.an-c-emoji {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color, #e5e5e5);
}

.an-c-emoji-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.an-c-emoji-tab {
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-color, #444);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.an-c-emoji-tab.is-active {
  background: var(--section-bg-color, #f0f0f0);
  color: var(--title-color, #171717);
  font-weight: 700;
}

.an-c-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 4px;
  max-height: 168px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 2px;
  scrollbar-gutter: stable;
}

.an-c-emoji-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}

.an-c-emoji-item:hover {
  background: var(--section-bg-color, #f7f7f7);
}

.an-c-gate {
  padding: 18px 20px;
  border: 1px solid var(--border-color, #e5e5e5);
  border-radius: 6px;
  background: var(--section-bg-color, #f9f9f9);
  color: var(--text-color, #444);
  font-size: 14px;
  text-align: center;
}

.an-c-gate-login {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--title-color, #171717);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

html.dark .an-c-thumb-video,
body.dark .an-c-thumb-video {
  background: linear-gradient(135deg, #2a2a2a, #1f1f1f);
}

@media (max-width: 767.98px) {
  .an-c-head {
    align-items: flex-start;
  }

  .an-c-search {
    width: 100%;
  }

  .an-c-item--reply {
    margin-left: 12px;
  }

  .an-c-compose {
    padding: 14px;
  }
}

/**
 * [Gurumi 모달 테마]
 * - 역할: body 포탈 모달을 ARTNET 라이트/다크 토큰에 맞춤
 * - 작성/수정일: 2026-08-08
 */
.g5-gurumi-modal-root {
  --g5-surface: var(--white-color, #ffffff);
  --g5-surface-muted: var(--section-bg-color, #f4f4f5);
  --g5-foreground: var(--title-color, #171717);
  --g5-text-secondary: var(--text-color, #52525b);
  --g5-text-tertiary: var(--muted-color, #a1a1aa);
  --g5-border-subtle: var(--border-color, #e4e4e7);
  --g5-border: var(--border-color, #d4d4d8);
  --g5-primary: var(--primary-color, #171717);
  --g5-primary-hover: var(--title-color, #0a0a0a);
  --g5-brand: var(--primary-color, #171717);
  color: var(--g5-foreground);
}

html.dark .g5-gurumi-modal-root,
body.dark .g5-gurumi-modal-root {
  --g5-surface: var(--white-color, #1c1c1c);
  --g5-surface-muted: var(--section-bg-color, #2a2a2a);
  --g5-foreground: var(--title-color, #f5f5f5);
  --g5-text-secondary: var(--text-color, #c4c4c4);
  --g5-text-tertiary: var(--muted-color, #8a8a8a);
  --g5-border-subtle: var(--border-color, #333);
  --g5-border: var(--border-color, #3f3f3f);
  --g5-primary: var(--primary-color, #f5f5f5);
  --g5-primary-hover: #ffffff;
  --g5-brand: var(--primary-color, #f5f5f5);
}

html.dark .g5-gurumi-modal-dialog,
body.dark .g5-gurumi-modal-dialog {
  background: var(--g5-surface);
  border-color: var(--g5-border-subtle);
  color: var(--g5-foreground);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

html.dark .g5-gurumi-modal-field input,
html.dark .g5-gurumi-link-input,
body.dark .g5-gurumi-modal-field input,
body.dark .g5-gurumi-link-input {
  background: var(--g5-surface-muted);
  border-color: var(--g5-border);
  color: var(--g5-foreground);
}

html.dark .g5-gurumi-btn-primary,
body.dark .g5-gurumi-btn-primary {
  background: var(--g5-primary);
  border-color: var(--g5-primary);
  color: #171717;
}

html.dark .g5-gurumi-btn-secondary,
body.dark .g5-gurumi-btn-secondary {
  background: transparent;
  border: 1px solid var(--g5-border);
  color: var(--g5-foreground);
}

.g5-gurumi-modal-root .g5-gurumi-btn-primary {
  color: #fff;
}

html.dark .g5-gurumi-modal-root .g5-gurumi-btn-primary,
body.dark .g5-gurumi-modal-root .g5-gurumi-btn-primary {
  color: #171717;
}