/* ==========================================================================
   Planner Item Detail Page
   ========================================================================== */

/* ==========================================================================
   Detail Card
   - 라벨 + 필드를 하나로 묶는 컨테이너
   - 내부 간격은 gap으로 일괄 처리
   ========================================================================== */
.detail-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-list-sm);  /* 8px - 라벨과 필드 사이 */
}

.detail-card--main {
  /* 추가 스타일 필요 시 여기에 */
}

.detail-card__label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  line-height: 1;
  /* margin 불필요 - detail-card gap으로 처리 */
}

.detail-card__value {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  margin: 0;
}

.detail-card__value--pre {
  white-space: pre-wrap;
}

.detail-card__row {
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* override thread_detail.css space-between leak */
  gap: var(--spacing-3);
}

.detail-card__row--top {
  align-items: flex-start;
}

/* ==========================================================================
   Detail Stack (Vertical list of cards)
   ========================================================================== */
.detail-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-section);  /* 16px - 카드 간 간격 */
}

/* ==========================================================================
   Detail Form Elements
   - Input styles moved to components/form_field.css
   - Use .form-field__input with --md, --lg, --completed variants
   ========================================================================== */

/* ==========================================================================
   Detail Button
   ========================================================================== */
.detail-btn {
  width: 100%;
  height: 44px;
  background: var(--color-fill-dark);
  color: var(--color-text-inverse);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  /* No margin - detail-stack gap handles spacing */
}

.detail-btn:hover {
  opacity: var(--opacity-pressed);
}

.detail-btn--icon {
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0;
}

.detail-btn--secondary {
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-list-sm);
}

.detail-btn--secondary:hover {
  background: var(--color-border-soft);
}

/* Todo Checkbox styles moved to components/checkbox.css */

/* ==========================================================================
   Avatar Stack (in detail)
   ========================================================================== */
.detail-avatar-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-list-sm);
  text-decoration: none;
  color: var(--color-text-secondary);
}

.detail-avatar-stack {
  display: flex;
  align-items: center;
}

.detail-avatar-stack .avatar {
  margin-left: -12px;
}

.detail-avatar-stack .avatar:first-child {
  margin-left: 0;
}

/* ==========================================================================
   Pending Participants List (inline on event show)
   ========================================================================== */
.detail-pending-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-list-sm);
  margin-top: var(--spacing-list-sm);
}

.detail-pending-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-list-sm);
}

.detail-pending-item__name {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  flex: 1;
  min-width: 0;
}

.detail-pending-item__status {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

/* ==========================================================================
   Friend Tag Button
   ========================================================================== */
.friend-tag-add-btn {
  width: var(--btn-height-sm);
  height: var(--btn-height-sm);
  border-radius: var(--radius-full);
  border: 2px dashed var(--color-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.friend-tag-add-btn:hover {
  border-color: var(--color-text-secondary);
  color: var(--color-text-primary);
}

/* ==========================================================================
   Emoji Picker
   ========================================================================== */
/* ==========================================================================
   Emoji Picker (category tabs + grid)
   ========================================================================== */
.emoji-field {}

.emoji-field__trigger {
  width: 100%;
  height: var(--btn-icon-size);
  padding: 0 var(--spacing-list-md);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-list-sm);
  text-align: left;
}

.emoji-field__trigger span:first-child {
  font-size: var(--font-size-2xl);
  line-height: 1;
}

.emoji-field__hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.emoji-field__dropdown {
  margin-top: var(--spacing-list-sm);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-base);
  overflow: hidden;
}

.emoji-picker__search {
  padding: var(--spacing-list-sm);
  border-bottom: 1px solid var(--color-border-soft);
}

.emoji-picker__search-input {
  width: 100%;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: 6px var(--spacing-list-sm);
  font-size: var(--font-size-xl);
  font-family: var(--font-family-primary);
  background: var(--color-bg-primary);
  outline: none;
  color: var(--color-text-primary);
  -webkit-appearance: none;
  transform: translateZ(0);
  line-height: 1.4;
}

.emoji-picker__search-input::placeholder {
  color: var(--color-text-muted);
}

.emoji-picker__empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  padding: var(--spacing-section) 0;
  margin: 0;
}

.emoji-picker__tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border-soft);
  padding: 0 var(--spacing-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.emoji-picker__tab {
  flex-shrink: 0;
  padding: var(--spacing-list-sm) var(--spacing-list-sm);
  font-size: var(--font-size-xl);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  opacity: var(--opacity-hint);
}

.emoji-picker__tab--active {
  opacity: 1;
  border-bottom-color: var(--color-text-primary);
}

.emoji-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: var(--spacing-list-sm);
  max-height: 220px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.emoji-picker__item {
  font-size: var(--font-size-3xl);
  padding: 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: none;
  border: none;
  text-align: center;
  line-height: 1;
}

.emoji-picker__item:active {
  background: var(--color-bg-primary);
}

/* ==========================================================================
   Group Project Card
   ========================================================================== */
.group-project-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--spacing-section);
  display: block;
  text-decoration: none;
}

.group-project-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-list-md);
}

.group-project-card__cover {
  width: var(--input-height);
  height: var(--input-height);
  border-radius: var(--radius-base);
  object-fit: cover;
  background: var(--color-project-gradient);
}

.group-project-card__info {
  flex: 1;
}

.group-project-card__title {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0;
}

.group-project-card__duration {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.group-project-card__progress {
  margin-top: var(--spacing-list-md);
  width: 100%;
  height: 6px;
  background: var(--color-border-soft);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.group-project-card__progress-bar {
  height: 100%;
  background: var(--color-project-purple);
  border-radius: var(--radius-full);
}

/* ==========================================================================
   Inline Flex with Gap
   ========================================================================== */
.flex-gap-sm {
  gap: var(--spacing-list-sm);
}

.flex-gap-md {
  gap: var(--spacing-list-md);
}