/**
 * Components CSS Library
 * Solveit Frontend Refactoring
 *
 * 공통 컴포넌트 스타일 라이브러리
 * ~1500줄의 중복된 CSS를 통합
 */

/* ========================================
   SEARCH BAR COMPONENT
   Used in: community.html, pro_board.html, resources.html, resources_view.html
   ======================================== */
.search-bar {
  width: 60%;
  display: flex;
  align-items: center;
  background-color: var(--color-bg-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 8px 16px;
  transition: all var(--transition-normal);
}

.search-bar:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  padding: 8px 12px;
  color: var(--color-text);
  background: transparent;
}

.search-bar input::placeholder {
  color: var(--color-text-muted);
}

.search-bar button {
  background-color: #7081a5;
  color: white;
  border: none;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.search-bar button:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-1px);
}

/* ========================================
   CREATE BUTTON COMPONENT
   Used in: community.html, pro_board.html, resources.html, community_write.html, etc.
   ======================================== */
.create-button {
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-normal);
  white-space: nowrap;
}

.create-button::before {
  content: '+';
  margin-right: 4px;
  font-size: 1.2em;
}

.create-button:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}

.create-button:active {
  transform: translateY(0);
}

/* ========================================
   BOARD LIST (TABLE) COMPONENT
   Used in: community.html, pro_board.html, resources.html
   ======================================== */
.board-list {
  margin-top: 2rem;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  background-color: var(--color-bg-white);
  overflow: hidden;
}

.board-list table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.board-list th,
.board-list td {
  padding: 1rem 1.5rem;
  text-align: left;
}

.board-list th {
  background-color: var(--color-bg);
  font-weight: 600;
  color: #444;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.board-list td {
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text);
}

.board-list tr:last-child td {
  border-bottom: none;
}

.board-list tbody tr {
  transition: all var(--transition-fast);
}

.board-list tbody tr:hover {
  background-color: #f8f9ff;
  cursor: pointer;
}

/* ========================================
   PAGE TITLE COMPONENT
   Used in: Almost all pages
   ======================================== */
h1.page-title {
  color: #1a1a1a;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
  position: relative;
  padding-bottom: var(--spacing-xs);
}

h1.page-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background-color: var(--color-primary);
  border-radius: 2px;
}

/* ========================================
   CARD COMPONENT
   Used in: index.html (snap-card), school pages (study-card), pro_board.html (procard)
   ======================================== */
.card {
  background: var(--color-bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  transition: all var(--transition-fast);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}

/* Snap Card Variant */
.snap-card {
  background: var(--color-bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-sm);
  overflow: hidden;
}

.snap-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text);
}

.snap-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--spacing-xs) var(--spacing-sm);
}

/* ========================================
   LIKE BUTTON COMPONENT
   Used in: snap.html, community_view.html, index.html, my_snaps.html
   ======================================== */
.like-button {
  border: none;
  background: none;
  cursor: pointer;
  transition: transform var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
}

.like-button:hover {
  transform: scale(1.05);
}

.like-button.liked {
  color: var(--color-error);
}

.like-button.liked svg {
  fill: var(--color-error);
  stroke: var(--color-error);
}

/* ========================================
   COMMENT SECTION COMPONENT
   Used in: snap.html, community_view.html
   ======================================== */
.comment-section {
  padding: var(--spacing-sm);
  background-color: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
}

.comment {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-light);
}

.comment:last-child {
  border-bottom: none;
}

.comment-form {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.comment-form input {
  flex: 1;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.comment-form button {
  padding: 6px 12px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.comment-form button:hover {
  background: var(--color-primary-dark);
}

/* ========================================
   BOARD HEADER LAYOUT
   Used in: community.html, pro_board.html, resources.html
   ======================================== */
.board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  gap: 1rem;
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */
@media (max-width: 768px) {
  .search-bar {
    width: 100%;
  }

  .board-header {
    flex-direction: column;
    align-items: stretch;
  }

  .board-list th:nth-child(3),
  .board-list td:nth-child(3) {
    display: none;
  }

  .board-list th,
  .board-list td {
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
  }

  h1.page-title {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {

  .board-list th,
  .board-list td {
    padding: 0.5rem;
    font-size: 0.85rem;
  }
}

/* ========================================
   ADAPTIVE ICON COMPONENT
   배경색에 따라 아이콘 색상 자동 조절
   Used in: All pages with SVG icons
   ======================================== */

/* 기본 adaptive icon 컨테이너 */
.adaptive-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.adaptive-icon img {
  transition: filter 0.2s ease;
}

/* 어두운 아이콘 (밝은 배경용) */
.adaptive-icon.icon-dark img,
.icon-dark img {
  filter: brightness(0) !important;
}

/* 밝은 아이콘 (어두운 배경용) */
.adaptive-icon.icon-light img,
.icon-light img {
  filter: brightness(0) invert(1) !important;
}

/* 수동 오버라이드 클래스 (필요시 사용) */
.force-icon-dark img {
  filter: brightness(0) !important;
}

.force-icon-light img {
  filter: brightness(0) invert(1) !important;
}

/* SVG 아이콘 기본 스타일 */
.svg-icon {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.svg-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

/* 아이콘 크기 유틸리티 클래스 */
.icon-xs {
  width: 12px;
  height: 12px;
}

.icon-sm {
  width: 16px;
  height: 16px;
}

.icon-md {
  width: 20px;
  height: 20px;
}

.icon-lg {
  width: 24px;
  height: 24px;
}

.icon-xl {
  width: 32px;
  height: 32px;
}

.icon-xxl {
  width: 48px;
  height: 48px;
}

/* 아이콘 컬러 유틸리티 클래스 */
/* 이미지 태그로 사용되는 SVG 아이콘에 대한 색상 필터 */

/* 검은색 아이콘 (밝은 배경용) - 기본값 */
.icon-black img,
img.icon-black {
  filter: brightness(0);
}

/* 흰색 아이콘 (어두운 배경용) */
.icon-white img,
img.icon-white {
  filter: brightness(0) invert(1);
}

/* 프라이머리 색상 아이콘 (#2563eb) */
.icon-primary img,
img.icon-primary {
  filter: brightness(0) saturate(100%) invert(32%) sepia(98%) saturate(1509%) hue-rotate(212deg) brightness(96%) contrast(91%);
}

/* 성공 색상 아이콘 (#22c55e) */
.icon-success img,
img.icon-success {
  filter: brightness(0) saturate(100%) invert(56%) sepia(48%) saturate(1035%) hue-rotate(96deg) brightness(95%) contrast(95%);
}

/* 경고 색상 아이콘 (#f59e0b) */
.icon-warning img,
img.icon-warning {
  filter: brightness(0) saturate(100%) invert(67%) sepia(64%) saturate(666%) hue-rotate(357deg) brightness(99%) contrast(96%);
}

/* 에러 색상 아이콘 (#ef4444) */
.icon-error img,
img.icon-error {
  filter: brightness(0) saturate(100%) invert(36%) sepia(96%) saturate(2373%) hue-rotate(339deg) brightness(95%) contrast(97%);
}

/* 아이콘에 그림자 효과 추가 */
.icon-glow img,
img.icon-glow {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}