/* =============================================
   StartHub - New Design
   ============================================= */

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

/* ===== 아이콘 폰트 로딩 전 스켈레톤 ===== */
.icons-loading .material-symbols-outlined {
  color: transparent !important;
  background: linear-gradient(90deg, #e5e7eb 25%, #f0f0f0 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: icon-shimmer 1.2s infinite;
  border-radius: 4px;
  display: inline-block;
  min-width: 1em;
  min-height: 1em;
  vertical-align: middle;
}
@keyframes icon-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* zoom은 JS(app.applyZoom)로 제어 — psp_zoom localStorage */

html, body {
  overflow-x: clip;
  max-width: 100vw;
}

html {
  background: #F1F3F5; /* zoom < 1 시 우측 빈 공간 배경색 통일 */
}

body {
  font-family: 'Inter', sans-serif;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ===== 헤더 ===== */
.glass-header {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #E9ECEF;
}

.profile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f97316, #ef4444);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  border: 1px solid #e8e8e8;
  overflow: hidden;
  flex-shrink: 0;
}

.hdr-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #E9ECEF;
  background: #fff;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.hdr-btn:hover { color: #1A73E8; background: #EBF3FF; border-color: #1A73E8; }

/* ===== 검색 엔진 버튼 ===== */
.engine-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #E9ECEF;
  cursor: pointer;
  background: #fff;
  color: #666;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.engine-pill.active { background: #1A73E8; color: #fff; border-color: #1A73E8; }
.engine-pill:not(.active):hover { background: #f5f5f5; color: #333; }

/* ===== 카테고리 칩 ===== */
.category-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  color: #666;
  transition: all 0.15s;
  font-family: inherit;
  min-width: fit-content;
}
.category-chip.active { background: #EBF3FF; color: #1A73E8; font-weight: 700; }
.category-chip:not(.active):hover { background: #f5f5f5; color: #333; }
.category-chip.active .cat-dot { background: #1A73E8 !important; }

.cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ===== 뷰 버튼 ===== */
.view-btn { color: #9ca3af; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.view-btn.active { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); color: #1A73E8; }
.zoom-btn { display: flex; align-items: flex-end; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; padding-bottom: 2px; }
.zoom-btn.active { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); color: #1A73E8 !important; }
.zoom-option.active { background: #EBF3FF; color: #1A73E8; }

/* ===== 편집 텍스트 버튼 ===== */
.edit-text-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  color: #1A73E8;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 6px;
  border-radius: 8px;
  transition: background 0.15s;
}
.edit-text-btn:hover { background: #EFF6FF; }

.edit-action-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.edit-action-btn.cancel {
  color: #6b7280;
  background: #f3f4f6;
}
.edit-action-btn.cancel:hover { background: #e5e7eb; }
.edit-action-btn.save {
  color: #fff;
  background: #1A73E8;
}
.edit-action-btn.save:hover { background: #1557b0; }

/* ===== 즐겨찾기 그리드 ===== */
.fav-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #E9ECEF;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 16px;
  position: relative;
}

/* 즐겨찾기 리스트 카드 컨테이너 */
.fav-list-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #E9ECEF;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* 2컬럼 리스트 */
.fav-list-card.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  min-height: auto;
}
.fav-list-card.two-col .inline-add-row,
.fav-list-card.two-col .inline-insert-row {
  grid-column: 1 / -1;
}
.fav-list-card.two-col .fav-item-list {
  min-width: 0;
  border-bottom: 1px solid #E9ECEF;
  border-right: none;
}
.fav-list-card.two-col .fav-item-list:nth-child(odd of .fav-item-list) {
  border-right: 1px solid #E9ECEF;
}

/* 3컬럼 리스트 */
.fav-list-card.three-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  min-height: auto;
}
.fav-list-card.three-col .inline-add-row,
.fav-list-card.three-col .inline-insert-row {
  grid-column: 1 / -1;
}
.fav-list-card.three-col .fav-item-list {
  min-width: 0;
  border-bottom: 1px solid #E9ECEF;
  border-right: 1px solid #E9ECEF;
}
.fav-list-card.three-col .fav-item-list:nth-child(3n of .fav-item-list) {
  border-right: none;
}

/* ── 2컬럼 편집 모드 ── */
.fav-list-card.two-col .fav-item-list.editing {
  align-items: flex-start;
  gap: 8px;
}
.fav-list-card.two-col .fav-item-list.editing .fav-edit-fields {
  flex: 1;
  width: auto;
  min-width: 0;
}
.fav-list-card.two-col .fav-item-list.editing .fav-edit-meta {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 80px;
  min-width: 0;
}
.fav-list-card.two-col .fav-item-list.editing .fav-cat-picker-btn .fav-cat-badge {
  font-size: 10px;
}
.fav-list-card.two-col .fav-item-list.editing .fav-edit-actions {
  margin-left: 0;
  justify-content: flex-start;
  gap: 2px;
}

/* ── 3컬럼 편집 모드 ── */
.fav-list-card.three-col .fav-item-list.editing {
  align-items: flex-start;
  gap: 6px;
}
.fav-list-card.three-col .fav-item-list.editing .fav-edit-fields {
  flex: 1;
  width: auto;
  min-width: 0;
}
.fav-list-card.three-col .fav-item-list.editing .fav-edit-meta {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 70px;
  min-width: 0;
}
.fav-list-card.three-col .fav-item-list.editing .fav-cat-picker-btn .fav-cat-badge {
  font-size: 9px;
}
.fav-list-card.three-col .fav-item-list.editing .fav-edit-actions {
  margin-left: 0;
  justify-content: flex-start;
  gap: 1px;
}
.fav-list-card.three-col .fav-item-list.editing .fav-edit-action-btn {
  width: 22px;
  height: 22px;
}

/* 그리드 아이템 */
.fav-item-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  cursor: pointer;
  position: relative;
  padding-bottom: 4px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  touch-action: pan-y; /* 기본은 세로 스크롤 허용, 드래그 시작 시 JS에서 none으로 전환 */
}
/* 그리드 아이콘 이미지 브라우저 기본 드래그 방지 */
.fav-grid .fav-icon-box img,
.fav-item-list .fav-icon-box img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

.fav-icon-box {
  width: 4.25rem;
  height: 4.25rem;
  flex-shrink: 0;
  border-radius: 12px;
  background: #f5f6fa;
  border: 1px solid #E9ECEF;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.fav-icon-box img { width: 60%; height: 60%; object-fit: contain; }
.fav-icon-box .emoji { font-size: 1rem; }
.fav-icon-box .initial { font-size: 0.8125rem; font-weight: 800; color: #1A73E8; }

.fav-item-grid:hover .fav-icon-box {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.fav-item-grid .fav-label {
  font-size: 0.625rem;
  color: #555;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 4.25rem;
  height: 0.875rem;
  line-height: 0.875rem;
  flex-shrink: 0;
}

/* 리스트 아이템 */
.fav-item-list {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid #E9ECEF;
  cursor: pointer;
  transition: background 0.12s;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
}
.fav-item-list:last-child { border-bottom: none; }
.fav-item-list:first-child { border-radius: 16px 16px 0 0; }
.fav-item-list:last-child:not(:first-child) { border-radius: 0 0 16px 16px; }
.fav-item-list:only-child { border-radius: 16px; }
.fav-item-list:hover { background: #F8F9FA; }

.fav-item-list .fav-icon-box {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  aspect-ratio: auto;
  flex-shrink: 0;
}
.fav-item-list.editing .fav-icon-box {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 12px;
}

.fav-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.fav-label-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fav-info .fav-label { font-size: 0.8125rem; font-weight: 700; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-domain-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fav-info .fav-domain { font-size: 0.6875rem; color: #aaa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.fav-meta { font-size: 0.625rem; color: #c4c9d0; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.fav-meta-sep { color: #dde1e7; font-size: 9px; }
.fav-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}

/* fav-edit-fields: 데스크탑에서 60% 고정 */
.fav-edit-fields { display: flex; flex-direction: column; gap: 4px; width: 55%; flex-shrink: 0; }

/* fav-edit-meta: 카테고리 + 액션 묶음 */
.fav-edit-meta { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.fav-edit-meta .fav-edit-actions { margin-left: auto; }

.fav-info-edit { gap: 4px; width: 60%; }

/* 드래그 핸들 */
.fav-drag-handle {
  color: #ccc;
  cursor: grab;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 2px;
}
.fav-drag-handle:active { cursor: grabbing; }

/* 카테고리 커스텀 피커 */
.fav-cat-picker {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: stretch;
}
.fav-cat-picker-btn {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #fff;
  border: 1px solid #E9ECEF;
  border-radius: 6px;
  cursor: pointer;
  padding: 0 8px;
  font-family: inherit;
  transition: border-color 0.15s;
  width: 100%;
}
.fav-cat-picker-btn:hover { border-color: #c0c4ca; }
.fav-cat-picker-btn .fav-cat-badge {
  font-size: 12px;
  padding: 0;
  border: none !important;
  background: none !important;
  white-space: nowrap;
}
.fav-cat-picker-chevron {
  font-size: 14px !important;
  color: #9ca3af;
  line-height: 1;
  display: block;
  flex-shrink: 0;
}
.fav-cat-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 90px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.fav-cat-options.hidden { display: none; }
.fav-cat-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  border: 1px solid transparent;
  background: none;
  font-family: inherit;
  transition: opacity 0.1s;
}
.fav-cat-option:hover { opacity: 0.8; }
.fav-cat-option.active { outline: 2px solid currentColor; outline-offset: 1px; }

/* 편집 액션 버튼 그룹 */
.fav-edit-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.fav-edit-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  border-radius: 6px;
  color: #bbb;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.fav-edit-action-btn .material-icons { font-size: 20px !important; }
.fav-edit-action-btn:hover { background: #f3f4f6; color: #555; }
.fav-edit-action-btn.danger:hover { background: #fee2e2; color: #ef4444; }

/* 위/아래 삽입 행 */
.inline-insert-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #eff6ff;
  border-bottom: 1px solid #dbeafe;
}

.fav-edit-wrapper {
  position: relative;
  width: 100%;
}
.fav-edit-input {
  width: 100%;
  border: 1px solid #E9ECEF;
  border-radius: 6px;
  padding: 3px 8px 3px 28px;
  font-size: 12px;
  font-family: inherit;
  color: #333;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}
.fav-edit-input:focus { border-color: #1A73E8; }
.fav-edit-name { font-weight: 600; }
.fav-edit-url { color: #888; font-size: 11px; }

.fav-edit-clear {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: #bbb;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.fav-edit-clear:hover { color: #ef4444; background: #fee2e2; }

/* 값이 없을 때(placeholder 보일 때) X 숨김 */
.fav-edit-input:placeholder-shown + .fav-edit-clear { display: none; }

/* 편집 모드 */
.delete-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  border: none;
  font-size: 9px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5;
  font-weight: 700;
}
.edit-mode .delete-btn { display: flex; }
.edit-mode .fav-item-grid { animation: wiggle 0.35s ease infinite alternate; }
/* 드래그 준비 wiggle (롱프레스 후) */
.drag-wiggle .fav-item-grid:not(.drag-source) { animation: wiggle 0.3s ease infinite alternate; }

@keyframes wiggle {
  from { transform: rotate(-1.5deg); }
  to { transform: rotate(1.5deg); }
}

/* 삭제 버튼 (리스트) */
.fav-delete-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.edit-mode .fav-item-list .fav-delete-btn { opacity: 1; pointer-events: auto; }
.fav-delete-btn:hover { background: #fee2e2; color: #ef4444; }

/* 드롭다운 */
.fav-dropdown {
  position: fixed;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  padding: 6px;
  z-index: 500;
  min-width: 110px;
  animation: dropIn 0.15s ease;
}
@keyframes dropIn {
  from { transform: scale(0.92) translateY(-4px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.fav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: #333;
  cursor: pointer;
  transition: background 0.12s;
}
.fav-dropdown-item:hover { background: #f5f5f5; }
.fav-dropdown-item.danger { color: #ef4444; }
.fav-dropdown-item.danger:hover { background: #fff5f5; }

/* 인라인 추가 */
.inline-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #EBF3FF;
  border-bottom: 1px solid #bfdbfe;
  border-radius: 16px 16px 0 0;
}
.fav-list-card:not(:has(.fav-item-list)) .inline-add-row { border-radius: 16px; }
.inline-add-row--tile { border-radius: 16px; margin-bottom: 8px; }

.inline-input {
  flex: 1;
  padding: 8px 12px !important;
  border: 1.5px solid #bfdbfe !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  font-weight: 400;
  outline: none !important;
  background: #fff !important;
  color: #333333 !important;
  min-width: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}
.inline-input::placeholder {
  color: #9ca3af !important;
  font-weight: 400;
}
.inline-input:focus {
  border-color: #1A73E8;
  box-shadow: 0 0 0 3px rgba(26,115,232,0.1);
}
.inline-input-name { max-width: 110px; flex: 0 0 auto; }

.inline-btn-add {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: #1A73E8;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.inline-btn-add:hover { background: #1558b0; }

.inline-btn-cancel {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1.5px solid #E9ECEF;
  background: #fff;
  color: #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
.inline-btn-cancel:hover { border-color: #ef4444; color: #ef4444; }

/* 가져오기 버튼 */
.import-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #aaa;
  background: transparent;
  border: 1.5px dashed #E9ECEF;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.import-btn:hover { border-color: #1A73E8; color: #1A73E8; background: #EBF3FF; }

/* ===== 시장 지표 ===== */
.market-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}
.market-divider { height: 1px; background: #f3f4f6; }
.market-name { font-size: 12px; color: #666; font-weight: 500; }
.market-price { font-size: 15px; font-weight: 700; color: #111; text-align: right; }
.market-change {
  font-size: 11px;
  font-weight: 600;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.market-change.up { color: #ef4444; }
.market-change.down { color: #3b82f6; }

.market-title-group { display: flex; flex-direction: column; gap: 1px; }
.market-interval { color: #d0d0d0; }

/* ===== 하단 탭 ===== */
.nav-btn {
  color: #9ca3af;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s;
  padding: 0;
}
.nav-btn.active, .nav-btn:hover { color: #1A73E8; }

/* ===== 모달 ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}
.modal-overlay.hidden { display: none; }

.modal-card {
  background: #fff;
  border-radius: 20px;
  padding: 22px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.15);
  animation: modalIn 0.2s ease;
}
@keyframes modalIn {
  from { transform: scale(0.94) translateY(10px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* 설정 모달: 모바일에서 풀페이지 */
@media (max-width: 1023px) {
  #settingsModal {
    padding: 0;
    align-items: flex-end;
  }
  #settingsModal .modal-card {
    border-radius: 20px 20px 0 0;
    max-width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    animation: settingsSlideUp 0.25s ease;
  }
}
@keyframes settingsSlideUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}
.modal-head h3 { font-size: 15px; font-weight: 700; color: #222; }
.modal-head button { background: none; border: none; color: #aaa; cursor: pointer; padding: 0; transition: color 0.15s; }
.modal-head button:hover { color: #555; }

.modal-body { display: flex; flex-direction: column; gap: 6px; }
.modal-body label { font-size: 11px; color: #888; font-weight: 600; margin-top: 6px; text-transform: uppercase; letter-spacing: 0.05em; }

.modal-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  color: #374151;
  background: #fff;
}
.modal-input:focus { border-color: #1A73E8; }

.favicon-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f8f8f8;
  border-radius: 10px;
  margin-top: 4px;
}
.favicon-preview img { width: 28px; height: 28px; border-radius: 6px; }
.favicon-preview span { font-size: 12px; color: #555; }

.modal-foot { display: flex; gap: 8px; margin-top: 16px; }

.btn-cancel {
  flex: 1;
  padding: 11px;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  background: #f5f5f5;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.btn-cancel:hover { background: #ebebeb; }

.btn-primary {
  flex: 1;
  padding: 11px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #1A73E8;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.btn-primary:hover { background: #1558b0; }

.info-box {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: #EBF3FF;
  border-radius: 10px;
  margin-bottom: 12px;
}
.info-box p { font-size: 11px; color: #1A73E8; line-height: 1.5; }

.import-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #EBF3FF;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 폴더 선택 아이템 */
.folder-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 2px solid #E9ECEF;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.folder-item.selected { border-color: #1A73E8; background: #EBF3FF; }
.folder-item:hover:not(.selected) { background: #fafafa; }
.folder-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.folder-item.selected .folder-checkbox { background: #1A73E8; border-color: #1A73E8; }
.folder-name { font-size: 13px; font-weight: 600; color: #222; }
.folder-count { font-size: 11px; color: #aaa; }

/* ===== 즐겨찾기 미리보기 카드 ===== */
.fav-preview-card {
  position: fixed;
  z-index: 500;
  width: 260px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid #e5e7eb;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s;
}
.fav-preview-card.visible {
  opacity: 1;
  transform: translateY(0);
}
@keyframes preview-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.fav-preview-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: preview-shimmer 1.2s infinite;
  border-radius: 4px;
}

/* ===== 토스트 ===== */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30,30,30,0.9);
  color: #fff;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
  z-index: 300;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

/* ===== 북마크 분석 로딩 스피너 ===== */
.loader {
  border: 3px solid #E9ECEF;
  border-top: 3px solid #1A73E8;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== 북마크 가져오기 성공 알림 ===== */
#importSuccessNotif:not(.hidden) {
  animation: importSuccessIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes importSuccessIn {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ===== 폴더 아코디언 ===== */
.folder-accordion-body:not(.hidden) { display: block; }
.folder-chevron { transition: transform 0.2s ease; }

/* ===== 즐겨찾기 헤더 sticky ===== */
.fav-sticky-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #F1F3F5;
  width: 100%;
}

/* ===== 즐겨찾기 검색 인풋 ===== */
.fav-search-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 0 8px;
  height: 28px;
  border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}
.fav-search-wrap:focus-within {
  border-color: #1A73E8;
  background: #fff;
}
#mobileSearchBar .fav-search-wrap {
  height: 39px;
}
.fav-search-wrap input {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
}
.fav-search-clear {
  display: flex;
  align-items: center;
  color: #bbb;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.1s;
}
.fav-search-clear:hover { color: #555; }

/* 즐겨찾기 필터 버튼 공통 (모바일·PC 통일) */
.fav-filter-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  background: #F1F3F5;
  border-radius: 10px;
  color: #6b7280;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.fav-filter-btn .material-icons { font-size: 26px !important; }
.fav-filter-btn:hover { background: #e5e7eb; color: #374151; }
#editBtnGroup .fav-filter-btn { width: 36px !important; }
@media (max-width: 1023px) {
  .fav-filter-btn { width: 38px !important; height: 43px !important; border-radius: 8px; }
  .fav-filter-btn .material-icons { font-size: 26px !important; }
  .edit-action-btn { font-size: 14px; padding: 6px 12px; gap: 4px; }
  .edit-action-btn .material-icons { font-size: 17px !important; }
}

.fav-sort-btn {
  height: 28px;
}
@media (min-width: 1024px) {
  .fav-search-wrap { height: 44px; border-radius: 10px; }
  .fav-sort-btn { height: 44px; border-radius: 10px; padding: 0 12px; font-size: 13px; }
}
.mob-col-opt, .mob-view-opt { color: #9ca3af; display: flex; align-items: center; justify-content: center; }
.mob-col-opt.active, .mob-view-opt.active { color: #1A73E8; background: #e8f0fe; border-radius: 6px; }
.mob-icon { font-size: 18px; line-height: 1; display: block; }

/* ===== 정렬 드롭다운 ===== */
.sort-option { color: #555; transition: background 0.1s; }
.sort-option.active { color: #1A73E8; font-weight: 600; background: #f0f6ff; }

/* ===== 음성 인식 ===== */
.mic-active { color: #ef4444 !important; animation: pulse 0.8s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ===== 데스크탑 타일형 아이콘 25% 확대 ===== */
@media (min-width: 768px) {
  .fav-grid .fav-icon-box { width: 5.3125rem; height: 5.3125rem; border-radius: 15px; }
  .fav-grid .fav-icon-box img { width: 65% !important; height: 65% !important; object-fit: contain; }
  .fav-grid .fav-icon-box .emoji { font-size: 1.25rem; }
  .fav-grid .fav-icon-box .initial { font-size: 1.0625rem; }
  .fav-item-grid .fav-label { font-size: 0.6875rem; width: 5.3125rem; height: 1rem; line-height: 1rem; }
  .fav-grid { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(5.3125rem, 1fr)); }
}

/* ===== 반응형 ===== */
@media (max-width: 767px) {
  .fav-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
}
@media (max-width: 480px) {
  .fav-grid { grid-template-columns: repeat(4, 1fr); }

  /* 편집모드 압축 */
  .fav-info-edit { width: 50%; }
  .fav-cat-picker-btn .fav-cat-badge { font-size: 9px; padding: 1px 5px; }
  .fav-edit-actions { gap: 1px; }
  .fav-edit-action-btn { width: 24px; height: 24px; }

  /* 검색 패딩 축소 */
  #searchInput { padding-top: 10px; padding-bottom: 10px; }

  /* 헤더 */
  .glass-header { padding: 8px 12px; }
}

/* 태블릿: 즐겨찾기 헤더 라벨 숨김 */
@media (max-width: 767px) {
  .fav-info .fav-domain { display: none; }
  .fav-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .fav-icon-box { width: 67px; height: 67px; }
  .fav-item-grid .fav-label { width: 67px; font-size: 11px; }
}
@media (max-width: 480px) {
  .fav-item-list { padding: 10px 12px; gap: 10px; }
  .fav-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .fav-icon-box { width: 67px; height: 67px; }
  .fav-item-grid .fav-label { width: 67px; font-size: 11px; }
}


/* ===== 모바일 편집 모드 카드 레이아웃 ===== */
@media (max-width: 1023px) {
  .fav-item-list.editing {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto auto;
    gap: 8px;
    padding: 12px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #E9ECEF;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 6px;
  }
  /* 행 1: 드래그 | 아이콘 | (빈 공간) */
  .fav-item-list.editing .fav-drag-handle {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }
  .fav-item-list.editing .fav-icon-box {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  /* 행 2: 이름 + URL 인풋 (전체 너비) */
  .fav-item-list.editing .fav-edit-fields {
    grid-column: 1 / 4;
    grid-row: 2;
    width: 100%;
  }
  /* 행 3: 카테고리 + 액션 버튼들 */
  .fav-item-list.editing .fav-edit-meta {
    grid-column: 1 / 4;
    grid-row: 3;
  }
  /* 터치 타겟 크게 */
  .fav-edit-action-btn { width: 40px; height: 40px; }
  .fav-edit-input { padding: 8px 10px 8px 32px; font-size: 14px; border-radius: 10px; }
  .fav-cat-picker-btn .fav-cat-badge {
    font-size: 12px;
    padding: 3px 8px;
  }

  /* 모바일 인라인 추가 폼: 인풋 수직 배치 */
  .inline-add-row {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
  }
  .inline-add-row > span.material-icons { display: none; }
  .inline-add-row .inline-input { flex: 1 1 100%; max-width: 100%; font-size: 14px !important; padding: 10px 12px !important; }
  .inline-add-row .inline-input-name { max-width: 100%; flex: 1 1 100%; }
  .inline-add-row .fav-cat-picker { flex: 1; }
  .inline-add-row .inline-btn-add,
  .inline-add-row .inline-btn-cancel { width: 40px; height: 40px; flex-shrink: 0; }
}

/* ===== 검색 placeholder 크기 ===== */
#searchInput::placeholder {
  font-size: 0.85em;
}

/* ===== 폴더 기능 ===== */

/* 폴더 아이콘 박스 - 흰 배경에 연한 파란 테두리 */
.fav-folder-icon {
  background: #fff !important;
  border: 1.5px solid #d1e3ff !important;
  box-shadow: 0 2px 8px rgba(26,115,232,0.10) !important;
}

/* 폴더 썸네일 - 4격자 */
.fav-folder-thumb {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  width: 66%;
  height: 66%;
}
.fav-folder-thumb-cell {
  background: #f1f3f5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fav-folder-thumb-cell img {
  width: 80% !important;
  height: 80% !important;
  object-fit: contain;
}

/* 그리드 폴더 아이템 - 열린 상태 */
.fav-folder-item.folder-open .fav-icon-box {
  outline: 2px solid #1A73E8;
  outline-offset: 2px;
  background: #EBF3FF !important;
}

/* 그리드 인라인 패널 */
.fav-folder-panel {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #E9ECEF;
  box-shadow: 0 4px 20px rgba(0,0,0,0.13);
  padding: 14px 16px;
  animation: folderPanelIn 0.18s ease;
}
.fav-folder-panel.open { display: block; }

@keyframes folderPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fav-folder-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f1f3f5;
}
.fav-folder-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: #222;
  cursor: text;
  user-select: none;
}
.fav-folder-close-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: #f3f4f6;
  border-radius: 50%;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.fav-folder-close-btn:hover { background: #e5e7eb; color: #555; }

.fav-folder-ungroup-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #ef4444;
  background: #fff0f0;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 3px 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.fav-folder-ungroup-btn:hover { background: #fee2e2; }

.fav-folder-panel-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.3125rem, 1fr));
  gap: 10px;
}
@media (max-width: 767px) {
  .fav-folder-panel-items { grid-template-columns: repeat(auto-fill, minmax(67px, 1fr)); gap: 8px; }
}

/* 리스트 폴더 행 */
.fav-folder-row { cursor: pointer; }
.fav-folder-row.folder-open { background: #f8faff; }
.fav-folder-chevron { transition: transform 0.2s ease; flex-shrink: 0; }
.fav-folder-row.folder-open .fav-folder-chevron { transform: rotate(90deg); }

/* 리스트 폴더 자식 항목 */
.fav-folder-child-list {
  padding-left: 28px !important;
  background: #fafbff;
  border-left: 3px solid #e0eaff;
}
.fav-folder-child-list:hover { background: #f0f6ff; }
.fav-folder-child-list.editing { padding-left: 28px !important; }

/* 드래그 그룹화 시각 피드백 */
.drag-group-ready {
  animation: none !important;
}
.drag-group-ready .fav-icon-box {
  transform: scale(1.18) !important;
  box-shadow: 0 0 0 3px #1A73E8, 0 6px 20px rgba(26,115,232,0.28) !important;
  background: #dbeafe !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}
.fav-item-list.drag-group-ready {
  background: #eff6ff !important;
  border-left: 3px solid #1A73E8 !important;
  padding-left: 13px !important;
}
.fav-item-list.drag-drop-above::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 8px;
  right: 8px;
  height: 2px;
  background: #1A73E8;
  border-radius: 2px;
}
.fav-item-list.drag-drop-below::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 8px;
  right: 8px;
  height: 2px;
  background: #1A73E8;
  border-radius: 2px;
}

/* 드래그 소스 */
.drag-source { opacity: 0.35 !important; }

/* 드래그 고스트 */
.fav-drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.92;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(0,0,0,0.16);
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.fav-drag-ghost .fav-icon-box { transform: scale(1.08); }

/* 폴더 이름 인라인 편집 인풋 */
.fav-folder-name-input {
  font-size: 13px;
  font-weight: 700;
  color: #222;
  border: 1.5px solid #1A73E8;
  border-radius: 8px;
  background: #fff;
  outline: none;
  padding: 2px 8px;
  font-family: inherit;
  min-width: 80px;
  max-width: 180px;
  box-shadow: 0 0 0 3px rgba(26,115,232,0.12);
}

/* 폴더 이름 더블클릭 힌트 */
.fav-folder-panel-title { cursor: text; }
.fav-folder-row .fav-folder-name { cursor: text; }

/* 그리드 폴더 라벨 */
.fav-folder-item .fav-label {
  color: #444;
  font-weight: 600;
}

/* 폴더 수 배지 */
.fav-folder-count-badge {
  font-size: 10px;
  color: #bbb;
  font-weight: 500;
}

/* ===== 뉴스 패널 ===== */
.news-site-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: none;
  text-decoration: none;
  color: #333;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  transition: box-shadow 0.18s, transform 0.18s;
  word-break: keep-all;
}
.news-site-card:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(43,52,55,0.08);
}
.news-site-card:active { transform: scale(0.97); }
.news-site-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: contain;
  display: block;
}
.news-site-card span {
  display: block;
  color: #555;
  font-size: 11px;
}
@media (min-width: 1024px) {
  .news-site-card { aspect-ratio: 5/3; }
}

/* ===== 탐색 패널 서브탭 ===== */
.explore-tab-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #666;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  margin-bottom: 6px;
}
.explore-tab-btn:not(.active):hover {
  background: #f5f5f5;
  color: #333;
}
.explore-tab-btn.active {
  background: #EBF3FF;
  color: #1A73E8;
  font-weight: 700;
}
.explore-tab-content.hidden { display: none; }


/* ===== 커뮤니티 트렌드 ===== */
/* community-range-btn은 explore-tab-btn 스타일로 통일 (별도 스타일 없음) */

/* 뷰 전환 구분선 & 버튼 */
/* 정렬 버튼 */
.community-sort-btn {
  flex-shrink: 0;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #999;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  margin-bottom: 6px;
}
.community-sort-btn:hover { background: #f3f4f6; color: #444; }
.community-sort-btn.active { background: #f0f0f0; color: #222; font-weight: 600; }

.community-view-divider {
  flex-shrink: 0;
  width: 1px;
  height: 18px;
  background: #e0e0e0;
  margin: 0 6px;
  align-self: center;
}
.community-view-btn {
  flex-shrink: 0;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #999;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  margin-bottom: 6px;
}
.community-view-btn:hover { background: #f3f4f6; color: #444; }
.community-view-btn.active { background: #f0f0f0; color: #222; font-weight: 600; }

/* 리스트 모드: grid 배치 */
#communityPostList.list-mode {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr);
  gap: 6px;
}
@media (min-width: 640px) {
  #communityPostList.list-mode {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}
@media (min-width: 1024px) {
  #communityPostList.list-mode {
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
  }
}

/* 사이트 필터 버튼 (2depth) */
.community-site-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #666;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  margin-bottom: 4px;
}
.community-site-btn:not(.active):hover {
  background: #f5f5f5;
  color: #333;
}
.community-site-btn.active {
  background: color-mix(in srgb, var(--site-color, #1A73E8) 15%, white);
  color: var(--site-color, #1A73E8);
  font-weight: 700;
}
.community-site-btn[data-site="all"].active {
  background: #EBF3FF;
  color: #1A73E8;
}
.community-site-favs-btn {
  color: #C8960C;
  background: #FFFBF0;
}
.community-site-favs-btn.active {
  background: #FFF8E1;
  color: #E6A817;
  font-weight: 700;
}
.site-fav-star {
  margin-left: 3px;
  font-size: 11px;
  opacity: 0.35;
  cursor: pointer;
  transition: opacity 0.15s, color 0.15s;
}
.site-fav-star:hover { opacity: 0.8; }
.site-fav-star.on { opacity: 1; color: #E6A817; }

.card-bookmark-btn {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  z-index: 2;
}
.card-bookmark-btn:hover { background: rgba(0,0,0,0.55); }
.card-bookmark-btn.on { background: rgba(230,168,23,0.85); }
.card-bookmark-btn .material-icons {
  font-size: 16px;
  color: #fff;
  line-height: 1;
}

.community-post-card {
  display: flex;
  gap: 12px;
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
  transition: box-shadow 0.15s;
}
.community-post-card:active { transform: scale(0.99); }

.community-post-thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f0f0f0;
}
.community-post-thumb-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
}
.community-post-body { flex: 1; min-width: 0; }
.community-post-title {
  font-size: 13px;
  font-weight: 500;
  color: #222;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}
.community-post-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #999;
}
.community-source-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
}

.community-skeleton {
  height: 88px;
  border-radius: 14px;
  background: linear-gradient(90deg, #e5e7eb 25%, #f0f0f0 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.community-empty {
  text-align: center;
  padding: 60px 20px;
  color: #aaa;
  font-size: 14px;
}

/* ===== 커뮤니티 PC 그리드 카드 ===== */
.community-grid-card {
  display: block;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.community-grid-card:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(43,52,55,0.08);
}
.community-grid-thumb-wrap {
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
  background: #f0f1f3;
}
.community-grid-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f0f1f3;
  transition: transform 0.5s ease;
  z-index: 1;
}
.community-grid-card:hover .community-grid-thumb {
  transform: scale(1.05);
}
.community-grid-no-img {
  z-index: 1;
}
.community-grid-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
}
.community-hot-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(135deg, #4355b9, #3649ac);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 2;
}
.community-grid-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.community-grid-source {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}
.community-grid-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.45;
  color: #2b3437;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.community-grid-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #737c7f;
  padding-top: 2px;
}
.community-grid-stats span {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* PC 범위 pill 탭 */
.community-range-pill {
  padding: 7px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #586064;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.community-range-pill.active {
  background: #fff;
  color: #4355b9;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* 포스트 목록 레이아웃 */
.community-post-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 12px 16px 96px;
  max-width: 1800px;
  margin: 0 auto;
}
@media (min-width: 480px) {
  .community-post-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
@media (min-width: 768px) {
  .community-post-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 12px 24px 96px;
  }
  .community-skeleton { height: 200px; }
}
@media (min-width: 1024px) {
  .community-post-list {
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    padding: 16px 32px 40px;
  }
}

/* ===== 스크롤 상단 플로팅 버튼 ===== */
.scroll-top-btn {
  position: fixed;
  bottom: 72px;
  right: 16px;
  z-index: 50;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #444;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.scroll-top-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-top-btn .material-icons { font-size: 20px; }

/* ===== 탐색 사이트 그리드 ===== */
.explore-site-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (min-width: 768px) {
  .explore-site-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1024px) {
  .explore-site-grid { grid-template-columns: repeat(10, 1fr); gap: 12px; }
}

/* ===== 유튜브 위젯 ===== */
.youtube-cat-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #666;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  margin-bottom: 4px;
}
.youtube-cat-btn:hover { background: #f3f4f6; color: #333; }
.youtube-cat-btn.active { background: #FF0000; color: #fff; }

.youtube-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding-bottom: 40px;
}
@media (min-width: 768px) {
  .youtube-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .youtube-grid { grid-template-columns: repeat(6, 1fr); gap: 16px; }
}

.youtube-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
.youtube-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.10); }

.youtube-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f3f4f6;
}
.youtube-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.youtube-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.youtube-title {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.youtube-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.youtube-channel {
  font-size: 11px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.youtube-views {
  font-size: 11px;
  color: #999;
}
.youtube-skeleton {
  border-radius: 12px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  aspect-ratio: 16/9;
  min-height: 160px;
}
.youtube-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: #999;
  font-size: 14px;
  line-height: 1.8;
}

/* ===== 헤더 네비 버튼 (PC) ===== */
.hdr-nav-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #888;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.hdr-nav-btn:hover { background: #f0f0f0; color: #333; }
.hdr-nav-btn.active { background: #e8f0fe; color: #1A73E8; }
#hdrNavExplore, #hdrNavTrend { padding: 0 9px; gap: 2px; font-size: 11px; }
#hdrNavHome { padding: 0 12px; }

/* ===== 모바일에서 리스트 multi-col 강제 1컬럼 ===== */
@media (max-width: 767px) {
  .fav-list-card.two-col,
  .fav-list-card.three-col {
    grid-template-columns: 1fr;
  }
}