/* ==========================================================================
   Together Detail Page - Show Page Styles
   ========================================================================== */

/* ==========================================================================
   Page Layout
   ========================================================================== */
.project-detail {
  padding-bottom: var(--spacing-page-bottom);
}

/* ==========================================================================
   Cover Image
   ========================================================================== */
.project-cover {
  /* main 패딩 벗어나서 전체 너비 */
  margin-left: calc(-1 * var(--spacing-section));
  margin-right: calc(-1 * var(--spacing-section));
  width: calc(100% + var(--spacing-section) * 2);
  /* 위로 당겨서 safe area까지 확장 */
  margin-top: calc(-1 * env(safe-area-inset-top));
  height: calc(40px + env(safe-area-inset-top));
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-secondary);
  /* sticky: 스크롤 시 상단 고정, absolute 자식(header-actions)도 유지됨 */
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

/* Mobile web: no safe-area pull (would hide cover under address bar) */
@media (max-width: 767px) {
  .web-layout .project-cover {
    margin-top: 0;
    height: 140px;
  }

  .web-layout .project-header-actions {
    top: var(--spacing-4);  /* 16px from cover top */
  }
}

/* Web (desktop): taller cover image */
@media (min-width: 768px) {
  .web-layout .project-cover {
    height: 120px;
    border-radius: 0;
    /* visible so the More menu dropdown can render outside the cover bounds */
    overflow: visible;
  }
}

.project-cover__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Explicit center so the visible slice is the middle of the source image */
  object-position: center center;
}

.project-cover__placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-avatar-gradient);
}

/* ==========================================================================
   Header Actions
   ========================================================================== */
.project-header-actions {
  position: absolute;
  /* 다른 페이지 헤더와 동일한 위치 (safe area + 8px) */
  top: env(safe-area-inset-top);
  left: var(--spacing-section);
  right: var(--spacing-section);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}

/* Uses .header-btn and .header-btn-group from components/button.css */

/* iOS: hide web action buttons when native nav bar is active (cover image stays visible) */
[data-bridge-components~="nav-bar"] .project-header-actions {
  display: none !important;
}

/* ==========================================================================
   Dropdown Menu
   ========================================================================== */
/* Uses .dropdown from components/dropdown.css */
/* Use .dropdown, .dropdown__item, .dropdown__item--danger in ERB */

/* ==========================================================================
   Project Info
   ========================================================================== */
.project-info {
  padding: var(--spacing-section) 0;
}

.project-info__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-card-content);
  margin-bottom: var(--spacing-list-md);
}

.project-info__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  margin: 0 0 var(--spacing-list-sm) 0;
}

.project-info__readmore {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  letter-spacing: -0.01em;
  margin: 0 0 var(--spacing-section) 0;
  cursor: pointer;
}

.project-info__description {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  letter-spacing: -0.01em;
  margin: 0 0 var(--spacing-list-md) 0;
  line-height: var(--line-height-relaxed);
  white-space: pre-line;
}

/* ==========================================================================
   Participants
   ========================================================================== */
.project-participants {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-list-sm);
  cursor: pointer;
  color: var(--color-text-secondary);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
}

.project-participants__count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  letter-spacing: -0.01em;
}

/* ==========================================================================
   Join Section
   ========================================================================== */
.project-join-section {
  padding: var(--spacing-list-sm) 0 var(--spacing-10);
}

/* ==========================================================================
   Plans Section
   ========================================================================== */
.project-plans-section {
  padding: 0;
}

.project-section-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  letter-spacing: -0.01em;
  margin: 0;
}

/* ==========================================================================
   Week Card
   ========================================================================== */
.project-weeks {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-list-sm);
  min-height: 280px;
}

.project-week-card {
  background: var(--color-card-fill);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.15s ease;
}

.project-week-card:active {
  transform: scale(0.98);
}

.project-week-card--expanded {
  box-shadow: var(--shadow-card);
}

.project-week-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-section);
}

.project-week-card__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.project-week-card__arrow {
  transition: transform 0.2s ease;
  color: var(--color-text-secondary);
}

.project-week-card__arrow svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  stroke-width: 1.5;
}

.project-week-card__content {
  padding: 0 var(--spacing-section) var(--spacing-section);
}

/* ==========================================================================
   Week Progress - uses .progress-bar from components/progress_bar.css
   Adjusted colors for filled week card background
   ========================================================================== */
.project-week-progress {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  padding-top: var(--spacing-list-md);
  margin-bottom: var(--spacing-1);
}

.project-week-card .progress-bar__segment {
  background: var(--color-border-soft);
}

.project-week-card .progress-bar__segment--filled {
  background: var(--color-text-secondary);
}

.project-week-card .progress-bar__label {
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Day Task
   ========================================================================== */
.project-day-task {
  display: flex;
  align-items: center;
  gap: var(--spacing-list-md);
  padding: var(--spacing-list-md) var(--spacing-section);
  margin-top: var(--spacing-list-sm);
  background: transparent;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.project-week-progress + .project-day-task {
  margin-top: var(--spacing-list-md);
}

/* Checkbox styles moved to components/checkbox.css */
/* Use: .checkbox .checkbox--checked-success for green checked state */

.project-day-task__content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-list-md);
}

.project-day-task__day {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  min-width: var(--btn-icon-size);
}

.project-day-task__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* ==========================================================================
   Creator Section
   ========================================================================== */
.project-creator-section {
  padding: 0 0 var(--spacing-section);
}

.project-creator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-section);
}

/* Uses .author-card from components/author_card.css */
/* Use .author-card, .author-card__info, .author-card__name, .author-card__meta in ERB */

.project-creator__info {
  display: flex;
  align-items: center;
  gap: var(--spacing-list-md);
  text-decoration: none;
}

.project-creator__details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-title-subtitle);
}

.project-creator__label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}

.project-creator__followers {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}

.project-creator__label strong {
  font-weight: var(--font-weight-semibold);
}

/* Plans Detail styles moved to pages/project_plans.css */
/* Members Page styles moved to pages/project_members.css */

/* Section Header with Link */
.project-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-section);
}

.project-section-link {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.project-section-link:hover {
  color: var(--color-text-primary);
}

/* ==========================================================================
   Together Button - Join/Follow Actions
   ========================================================================== */
.together-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
  text-decoration: none;
  padding: var(--spacing-list-sm) var(--spacing-section);
}

.together-btn:active {
  transform: scale(0.96);
}

.together-btn--primary {
  background: var(--color-fill-dark);
  color: var(--color-text-inverse);
  border: none;
}

.together-btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-soft);
}

html.dark .together-btn--secondary {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-soft);
}

.together-btn--sm {
  padding: var(--spacing-list-sm) var(--spacing-section);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-full);
}

.together-btn--join {
  width: 100%;
  height: var(--btn-height-lg);
  border-radius: var(--radius-full);
}

/* ==========================================================================
   Guest Preview Page
   ========================================================================== */
.project-preview {
  padding-bottom: var(--spacing-page-bottom);
}

.project-preview__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-list-md) var(--spacing-section);
  padding-top: calc(env(safe-area-inset-top) + var(--spacing-list-md));
}

.project-preview__logo {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.project-preview__signin {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.project-preview__cover {
  width: 100%;
  height: 200px;
  background-color: var(--color-bg-secondary);
  overflow: hidden;
}

.project-preview__cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-preview__cover-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-avatar-gradient);
}

.project-preview__content {
  padding: var(--spacing-section);
}

.project-preview__members {
  margin-bottom: var(--spacing-section-gap);
}

.project-preview__cta {
  margin-bottom: var(--spacing-section-gap);
}