/* ===== 공용 버튼, 컨트롤, 뱃지 등 ===== */

/* 공용: 링크 복사 버튼 */
.btn-copy-inline { background: transparent; border: none; color: inherit; display: inline-flex; align-items: center; justify-content: center; padding: 4px; margin: 0; border-radius: 6px; cursor: pointer; }
.btn-copy-inline i { font-size: 0.95rem; }
.btn-copy-inline.success i { color: var(--success-green); }

/* 버튼 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
}
.btn-primary {
    background: var(--main-purple);
    color: white;
}
.btn-primary:hover {
    background: #6D5BD0;
}
.btn-primary:disabled {
    background: #ccc;
    cursor: not-allowed;
}
.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-gray);
}
.btn-secondary:hover {
    background: var(--purple-hover);
}
.btn-danger {
    background: #ef4444;
    color: #fff;
}
.btn-danger:hover {
    background: #dc2626;
}
.btn-danger:disabled {
    background: #f87171;
    cursor: not-allowed;
}
.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.btn-outline i { font-size: 0.95rem; }
.btn-outline .count { color: var(--text-gray); font-size: 0.9rem; }
.btn-outline:hover { background: var(--purple-hover); }
.btn-outline.active { border-color: var(--main-purple); color: var(--main-purple); }
/* 이미 투표한 버튼 스타일 */
.btn-outline.voted {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--border-gray);
}
.btn-outline.voted:hover {
    background: var(--border-gray);
    transform: none;
}
.btn-block {
    width: 100%;
}
.btn-loading {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.icon-btn { background: transparent; border: none; color: var(--text-gray); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; }
.icon-btn:hover { background: var(--purple-hover); color: var(--text-primary); }
.btn-emoji { position: absolute; top: 7px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--icon-color); border-radius: 6px; cursor: pointer; font-size: 18px; right: 8px; }
.comment-form.has-text .btn-emoji { display: none; }
.btn-send { position: absolute; top: 9px; right: 8px; height: 32px; padding: 0 12px; min-width: 60px; display: none; align-items: center; justify-content: center; background: var(--main-purple); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
.comment-form.has-text .btn-send { display: inline-flex; }
.btn-emoji:hover { background: var(--purple-hover); }
.btn-primary:active { transform: translateY(1px); }

/* Floating Action Button (글쓰기) */
.fab { position: fixed; bottom: 20px; right: calc((100vw - min(100vw, 768px)) / 2 + 16px); width: 56px; height: 56px; border-radius: 50%; background: var(--main-purple); color: #fff; border: none; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1000; transition: box-shadow 0.2s ease, transform 0.18s ease; }
.fab i { font-size: 1.1rem; }
.fab:active { transform: translateY(1px); }
@media (max-width: 420px) { .fab { width: 52px; height: 52px; bottom: 16px; right: 16px; } }
@media (hover: hover) and (pointer: fine) {
  .fab:hover {
    box-shadow: 0 0 0 2px rgba(133,114,238,0.10) inset, 0 10px 24px rgba(133,114,238,0.35);
    transform: translateY(-1px) scale(1.1);
  }
  body.dark-mode .fab:hover {
    box-shadow: 0 0 0 2px rgba(133,114,238,0.28) inset, 0 12px 28px rgba(133,114,238,0.45);
  }
}

/* Skeleton */
.skeleton-block { background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.12), rgba(0,0,0,0.06)); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 6px; }
.skeleton-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.12), rgba(0,0,0,0.06)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.rank-item.is-skeleton { pointer-events: none; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Utilities */
.screen-reader-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 1px, 1px); border: 0; }

/* Controls (switch/chips/search) */
.switch-container { display: flex; align-items: center; gap: 4px; }
.switch-label { font-size: 0.85rem; color: var(--text-gray); cursor: pointer; }
.switch { position: relative; display: inline-block; width: 28px; height: 16px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 2px; bottom: 2px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: var(--main-purple); }
input:checked + .slider:before { transform: translateX(12px); }
.slider.round { border-radius: 16px; }
.slider.round:before { border-radius: 50%; }
.sig-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sig-chip { border: 1px solid var(--border-gray); background: transparent; color: var(--text-primary); padding: 6px 10px; border-radius: 0; cursor: pointer; font-size: 0.9rem; }
.sig-chip.active, .sig-chip:hover { border-color: var(--main-purple); box-shadow: 0 0 0 2px rgba(133,114,238,0.10) inset; }
.sig-refresh { border: 1px solid var(--border-gray); background: transparent; color: var(--text-gray); padding: 6px 9px; border-radius: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sig-refresh:hover { border-color: var(--main-purple); color: var(--text-primary); box-shadow: 0 0 0 2px rgba(133,114,238,0.10) inset; }
.sig-refresh i { pointer-events: none; will-change: transform; }
@keyframes sig-refresh-rotate-once { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.sig-refresh i.is-rotating { animation: sig-refresh-rotate-once 0.6s ease; }

/* Search bar (cross-browser consistent: Safari/Chrome/Firefox) */
.search-form { gap: 10px; }
.search-bar { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; width: 100%; }
@media (max-width: 520px) { .search-bar { grid-template-columns: 1fr auto; grid-auto-rows: auto; } }

.search-input { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 1px solid var(--border-gray); border-radius: 12px; padding: 12px 14px; background: var(--background-white); color: var(--text-primary); font-size: 16px; line-height: 1.2; width: 100%; min-width: 0; }
.search-input::-webkit-search-decoration,
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-results-button,
.search-input::-webkit-search-results-decoration { display: none; }
.search-input::placeholder { color: var(--text-gray); opacity: 1; }
.search-input:focus { outline: none; border-color: var(--main-purple); box-shadow: 0 0 0 3px rgba(133,114,238,0.15); }

.search-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 1px solid var(--border-gray); border-radius: 12px; padding: 12px 38px 12px 12px; background: var(--background-white); color: var(--text-primary); font-size: 14px; line-height: 1.2; position: relative; min-width: 120px; background-image: linear-gradient(45deg, transparent 50%, var(--text-gray) 50%), linear-gradient(135deg, var(--text-gray) 50%, transparent 50%); background-position: calc(100% - 18px) calc(1em - 2px), calc(100% - 12px) calc(1em - 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.search-select:focus { outline: none; border-color: var(--main-purple); box-shadow: 0 0 0 3px rgba(133,114,238,0.15); }

.search-button { border-radius: 12px; padding: 12px 16px; font-weight: 600; }

/* iOS Safari specific adjustments */
@supports (-webkit-touch-callout: none) {
  .search-input, .search-select { font-size: 16px; }
}

/* Dark mode tweaks */
body.dark-mode .search-input, body.dark-mode .search-select { background: var(--background-white); }

/* Existing minimal search (signature) kept for compatibility */
.sig-search { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border-gray); border-radius: 0; background: transparent; flex: 1 0 100%; width: 100%; cursor: text; position: relative; }
.sig-search input { border: none; outline: none; background: transparent; color: var(--text-primary); flex: 1 1 auto; width: 100%; min-width: 0; }
.sig-search input::-webkit-search-cancel-button { display: none; }
.clear-button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 16px; display: none; color: var(--text-gray); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.clear-button:hover { background: var(--border-gray); }
.sig-search input:not(:placeholder-shown) ~ .clear-button { display: flex; }

/* Badges (live/viewer/new/signature) */
.live-badge { position: absolute; left: 5px; top: 5px; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.78rem; padding: 4px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; line-height: 1; font-weight: 700; }
.live-badge i { font-size: 0.55rem; color: #ff3b30; }
.viewer-badge { position: absolute; right: 8px; top: 8px; background: rgba(0,0,0,0.55); color: #fff; font-size: 0.72rem; padding: 4px 6px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.new-badge { position: absolute; left: 8px; top: 8px; background: #e74c3c; color: #fff; font-size: 0.72rem; padding: 4px 6px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; line-height: 1; font-weight: 700; letter-spacing: 0.3px; }
.board-live-badge { background: #e74c3c; color: #fff; font-size: 0.65rem; padding: 2px 5px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; line-height: 1; font-weight: 700; letter-spacing: 0.2px; margin-right: 6px; position: relative; top: -2px; }
.sig-card .new-badge { left: 4px; top: 4px; font-size: 0.65rem; padding: 3px 5px; border-radius: 4px; }
.sig-badge { position: absolute; color: #fff; font-size: 0.78rem; padding: 4px 6px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; line-height: 1; z-index: 2; backdrop-filter: saturate(120%) blur(2px); }
.sig-price-badge { left: 8px; top: 8px; background: var(--main-purple); font-weight: 800; letter-spacing: 0.3px; }
.sig-group-badge { right: 7px; top: 6px; background: none; border-radius: 0; padding: 0; font-weight: 700; backdrop-filter: none; -webkit-backdrop-filter: none; gap: 2px; text-shadow: 0 1px 2px rgba(0,0,0,0.7); }
.sig-title-badge { left: 8px; bottom: 8px; max-width: calc(100% - 16px); background: rgba(0,0,0,0.55); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig-combined-badge { left: 0; bottom: 0; max-width: calc(100% - 16px); background: rgba(133, 114, 238, 0.8); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 0; }

/* 모바일 hover 효과 무력화 */
@media (hover: none), (pointer: coarse) {
  .modal-content .comment-item.root-comment:hover,
  .modal-content .comment-actions .btn-reply:hover,
  .modal-content .btn-emoji:hover,
  .modal-content .btn-outline:hover {
    background: transparent;
    box-shadow: none;
    transform: none;
  }
}

/* 인기글: 추천 버튼 금색 글로우 */
.btn-outline.btn-like.popular-glow {
  box-shadow: 0 0 0 2px rgba(245, 179, 0, 0.25), 0 0 14px rgba(245, 179, 0, 0.45);
}

/* 비추천 10개 이상: 빨간색 글로우 */
.btn-outline.btn-dislike.danger-glow {
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25), 0 0 14px rgba(239, 68, 68, 0.45);
}

/* 고정닉 아이콘 공용 스타일 */
.fixed-badge {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 4px;
  object-fit: contain;
}

/* 레벨 아이콘 스타일 */
.level-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 4px;
  object-fit: contain;
}

/* 고정닉 텍스트 색상: 라이트=검정, 다크=흰색 */
.fixed-badge + .author-name { color: #000; }
html.dark-mode .fixed-badge + .author-name { color: #fff; }

/* 레벨 아이콘이 있는 유저 닉네임 색상 */
.level-icon + .author-name { color: #000; }
html.dark-mode .level-icon + .author-name { color: #fff; }

/* 셀럽 유저 (레벨 7) 특별 스타일 */
.level-icon[src*="level-7"] + .author-name {
  color: #3B82F6;
  font-weight: 600;
}
html.dark-mode .level-icon[src*="level-7"] + .author-name {
  color: #60A5FA;
  font-weight: 600;
}

/* 매니저 (레벨 8) 특별 스타일 - SVG 색상(#53B1AE) 기준 */
.level-icon[src*="level-8"] + .author-name {
  color: #53B1AE;
  font-weight: 600;
}
html.dark-mode .level-icon[src*="level-8"] + .author-name {
  color: #6FC4C1;
  font-weight: 600;
}