/* ===============================================
   admin-references.css - Style Reference 관리자 페이지
   기존 admin-notices.css 디자인 패턴 기반
   =============================================== */

/* 레이아웃 */
.admin-ref-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 0;
}

/* 로그인 섹션 */
.admin-ref-login-box {
  background: rgba(45, 36, 71, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  padding: 2rem;
  margin-bottom: 2rem;
  max-width: 400px;
}

.admin-ref-login-box h2 {
  margin: 0 0 1.25rem 0;
  font-size: 1.25rem;
  color: #fff;
}

.admin-ref-login-box .login-error {
  color: #f48fb1;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.admin-ref-login-box .button.primary {
  height: auto;
  line-height: 1.35;
  padding: 0.45rem 1.2rem;
  font-size: 0.95rem;
  margin-top: 0.5rem;
  cursor: pointer;
}

/* 툴바 */
.admin-ref-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.admin-ref-toolbar .admin-user {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.admin-ref-toolbar .button {
  height: auto;
  line-height: 1.35;
  padding: 0.28rem 0.85rem;
  font-size: 0.95rem;
  margin: 0;
  cursor: pointer;
}

/* 셀렉터 행 */
.admin-ref-selector-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: flex-end;
}

.admin-ref-selector-row .selector-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.admin-ref-selector-row label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
}

.admin-ref-selector-row select {
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.375rem;
  color: #fff;
  font-size: 0.95rem;
  min-width: 180px;
}

.admin-ref-selector-row select option {
  background: #2d2447;
  color: #fff;
}

/* 현재 아이템 이미지 그리드 */
.admin-ref-grid-section {
  background: rgba(45, 36, 71, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.admin-ref-grid-section h3 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  color: #fff;
}

.admin-ref-grid-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.admin-ref-grid-header h3 {
  margin: 0 !important;
}

.admin-ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.admin-ref-card {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  overflow: hidden;
  transition: border-color 0.2s;
}

.admin-ref-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.admin-ref-card img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}

.admin-ref-card .card-placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.3);
  font-size: 2rem;
}

.admin-ref-card-info {
  padding: 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.admin-ref-card-name {
  font-size: 0.8rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-ref-card-tag {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.admin-ref-card-tag .tag-hot {
  color: #ff6b35;
  font-weight: 600;
}

.admin-ref-card-tag .tag-new {
  color: #4fc3f7;
  font-weight: 600;
}

.admin-ref-card-actions {
  display: flex;
  gap: 0.35rem;
  padding: 0 0.6rem 0.5rem;
}

.admin-ref-card-actions button {
  flex: 1;
  height: auto;
  line-height: 1.3;
  padding: 0.2rem 0.4rem;
  margin: 0;
  font-size: 0.72rem;
  cursor: pointer;
  border-radius: 0.25rem;
}

.admin-ref-card-actions .btn-edit {
  background: rgba(63, 81, 181, 0.4);
  border: 1px solid rgba(63, 81, 181, 0.6);
  color: #fff;
}

.admin-ref-card-actions .btn-edit:hover {
  background: rgba(63, 81, 181, 0.6);
}

.admin-ref-card-actions .btn-delete {
  background: rgba(194, 24, 91, 0.4);
  border: 1px solid rgba(194, 24, 91, 0.6);
  color: #fff;
}

.admin-ref-card-actions .btn-delete:hover {
  background: rgba(194, 24, 91, 0.6);
}

/* 추가/편집 폼 */
.admin-ref-form-box {
  background: rgba(45, 36, 71, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.admin-ref-form-box h3 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  color: #fff;
}

.admin-ref-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.75rem;
  align-items: flex-end;
}

.admin-ref-form-row .form-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 160px;
}

.admin-ref-form-row label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
}

.admin-ref-form-row input[type="text"],
.admin-ref-form-row input[type="url"],
.admin-ref-form-row input[type="number"],
.admin-ref-form-row select {
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.375rem;
  color: #fff;
  font-size: 0.95rem;
}

.admin-ref-form-row input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.admin-ref-form-row select option {
  background: #2d2447;
  color: #fff;
}

/* URL 프리뷰 */
.admin-ref-preview {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.75rem 0;
}

.admin-ref-preview img {
  width: 120px;
  height: 160px;
  object-fit: cover;
  border-radius: 0.375rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
}

.admin-ref-preview .preview-placeholder {
  width: 120px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.8rem;
  text-align: center;
}

.admin-ref-form-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.admin-ref-form-buttons .button {
  height: auto;
  line-height: 1.35;
  padding: 0.35rem 1rem;
  font-size: 0.95rem;
  margin: 0;
  cursor: pointer;
}

/* 데이터 초기화 관련 */
.admin-ref-init-box {
  background: rgba(255, 152, 0, 0.1);
  border: 1px solid rgba(255, 152, 0, 0.3);
  border-radius: 0.5rem;
  padding: 1.2rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.admin-ref-init-box p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.admin-ref-init-box .button {
  height: auto;
  line-height: 1.35;
  padding: 0.35rem 1rem;
  font-size: 0.95rem;
  margin: 0;
  cursor: pointer;
}

/* 상태 메시지 */
.admin-ref-status {
  padding: 0.6rem 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  display: none;
}

.admin-ref-status.success {
  display: block;
  background: rgba(76, 175, 80, 0.15);
  border: 1px solid rgba(76, 175, 80, 0.3);
  color: #81c784;
}

.admin-ref-status.error {
  display: block;
  background: rgba(244, 67, 54, 0.15);
  border: 1px solid rgba(244, 67, 54, 0.3);
  color: #ef9a9a;
}

.admin-ref-status.info {
  display: block;
  background: rgba(33, 150, 243, 0.15);
  border: 1px solid rgba(33, 150, 243, 0.3);
  color: #90caf9;
}

/* 카운트 뱃지 */
.admin-ref-count {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

/* empty state */
.admin-ref-empty {
  text-align: center;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.35);
}

.admin-ref-empty i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  display: block;
}

/* 숨김 */
.admin-hidden { display: none !important; }

/* 로딩 */
.admin-ref-loading {
  text-align: center;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.5);
}

.admin-ref-loading i {
  animation: spin 1s linear infinite;
  margin-right: 0.5rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 반응형 */
@media (max-width: 768px) {
  .admin-ref-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
  }

  .admin-ref-selector-row {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-ref-selector-row select {
    min-width: 100%;
  }

  .admin-ref-form-row {
    flex-direction: column;
  }
}