/* ==========================================================================
   Friend Tag Page Component
   친구 태그 페이지 스타일
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Page Layout
   --------------------------------------------------------------------------- */
.friend-tag-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.friend-tag-page__content {
  flex: 1;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ---------------------------------------------------------------------------
   Search - 검색 영역
   --------------------------------------------------------------------------- */
.friend-tag-search {
  position: relative;
  margin-bottom: var(--spacing-section);
}

.friend-tag-search-input {
  width: 100%;
  height: var(--btn-icon-size);
  padding: 0 var(--spacing-section) 0 40px;
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-base);
  outline: none;
  box-sizing: border-box;
}

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

.friend-tag-search-icon {
  position: absolute;
  left: var(--spacing-3);
  top: 50%;
  transform: translateY(-50%);
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  color: var(--color-text-secondary);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Friend List - 친구 목록
   --------------------------------------------------------------------------- */
.friend-tag-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.friend-tag-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background 0.15s ease;
}

.friend-tag-item:active {
  background: var(--color-bg-secondary);
}

.friend-tag-item.selected {
  background: var(--color-bg-white);
}

.friend-tag-item.already-tagged {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Friend Info - 친구 정보
   --------------------------------------------------------------------------- */
.friend-tag-info {
  flex: 1;
  min-width: 0;
}

.friend-tag-name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.friend-tag-username {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------------------------
   Checkmark - 선택 체크마크
   --------------------------------------------------------------------------- */
.friend-tag-check {
  width: var(--avatar-size-sm);
  height: var(--avatar-size-sm);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.friend-tag-item.selected .friend-tag-check {
  background: var(--color-fill-dark);
  border-color: var(--color-fill-dark);
}

.friend-tag-check svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  stroke: var(--color-text-inverse);
  stroke-width: 3;
  opacity: 0;
}

.friend-tag-item.selected .friend-tag-check svg {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   Already Tagged Badge - 이미 태그됨 배지
   --------------------------------------------------------------------------- */
.friend-tag-already-badge {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--spacing-1);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Actions - 액션 버튼 (sticky bottom)
   --------------------------------------------------------------------------- */
.friend-tag-actions {
  position: sticky;
  bottom: 0;
  padding: var(--spacing-section);
  padding-bottom: calc(var(--spacing-section) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-bg-primary);
}

.friend-tag-submit {
  width: 100%;
  padding: var(--spacing-3);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse);
  background: var(--color-fill-dark);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.friend-tag-submit:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.friend-tag-submit:active:not(:disabled) {
  opacity: 0.8;
}