/* programs-list.css — portal-agnostic 1열 에디토리얼 리스트 (모집 프로그램)
 *
 * 호스트/버디 모집 프로그램 화면이 공유하는 리스트 시안.
 * portal accent와 톤 토큰을 .program-grid 안에서 정의해 자식 카드에 inherit.
 *
 * portal accent override:
 *   .program-grid { --list-accent: #2D8A56; }   // 버디
 *
 * host-tokens.css가 같이 link되어 있으면 --htp-* fallback으로 자동 매핑.
 */

.program-grid {
  --list-bg: var(--htp-bg, #faf8f4);
  --list-paper: var(--htp-paper, #ffffff);
  --list-ink: var(--htp-ink, #1a1816);
  --list-ink2: var(--htp-ink2, #5a544c);
  --list-ink3: var(--htp-ink3, #9a9288);
  --list-rule: var(--htp-rule, #e6e0d4);
  --list-rule-soft: var(--htp-rule-soft, #efeae0);
  --list-accent: var(--htp-accent, #C2410C);
  --list-sans: var(--htp-sans, "Pretendard Variable", Pretendard, -apple-system, sans-serif);

  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border-top: 1px solid var(--list-rule-soft) !important;
}

.program-grid .program-card {
  border-bottom: 1px solid var(--list-rule-soft) !important;
  border-right: none !important;
  padding: 32px 0 !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  /* default: remarks 없는 카드 — 액션이 메타와 같은 행 우측 (좌측 빈 여백 0) */
  grid-template-areas:
    "head head"
    "meta actions" !important;
  gap: 16px !important;
}

/* remarks가 있을 때만 3행으로 확장 — 액션은 remarks와 같은 행 우측 */
.program-grid .program-card:has(> .program-card__remarks) {
  grid-template-areas:
    "head    head"
    "meta    meta"
    "remarks actions" !important;
}

.program-grid .program-card__title {
  grid-column: 1 / -1 !important;
  font-size: 22px !important;
}

/* 제목 + chip을 한 행에 양 끝 정렬 */
.program-grid .program-card__head {
  grid-area: head !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
.program-grid .program-card__meta { grid-area: meta !important; }
.program-grid .program-card__remarks { grid-area: remarks !important; }
.program-grid .program-card__actions { grid-area: actions !important; }
.program-grid .program-card__head .program-card__title {
  grid-column: auto !important;
}

.program-grid .program-card__meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  font-family: var(--list-sans) !important;
  font-size: 14px !important;
  color: var(--list-ink2) !important;
}

.program-grid .program-card__meta > span,
.program-grid .program-card__meta-row > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.program-grid .program-card__meta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  column-gap: 16px !important;
  row-gap: 4px !important;
}

.program-grid .program-card__meta svg { color: var(--list-ink3) !important; }

/* 일정 강조 — portal accent */
.program-grid .program-card__date {
  color: var(--list-accent) !important;
  font-weight: 600 !important;
}
.program-grid .program-card__date svg { color: var(--list-accent) !important; }

.program-grid .program-card__remarks {
  background: transparent !important;
  border: none !important;
  border-left: 2px solid var(--list-rule) !important;
  border-radius: 0 !important;
  color: var(--list-ink2) !important;
  padding: 4px 0 4px 16px !important;
  grid-column: 1 / 2 !important;
}

/* 우측 컬럼: chip 위, 정보 가운데, 액션 버튼 아래로 세로 정렬 */
.program-grid .program-card__recruitment {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
  font-family: var(--list-sans) !important;
  font-size: 13px !important;
  color: var(--list-ink2) !important;
  text-align: right;
}

/* 제목 행 우측: chip + 모집인원을 inline 그룹 (한 줄 유지) */
.program-grid .program-card__status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* 지원완료 chip — 회색 톤 (이미 했음 의미) */
.program-grid .program-card__chip--applied {
  background: rgba(90, 84, 76, 0.12);
  background: color-mix(in srgb, var(--list-ink2) 12%, transparent);
  color: var(--list-ink2);
}

/* 액션 버튼 — grid-template-areas로 항상 마지막 행 우측에 배치. remarks가 있으면
 * 같은 행 좌측을 remarks가 채우고, 없으면 작은 빈 셀만 남는다. */
.program-grid .program-card__actions {
  align-self: end !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

/* portal accent에 동조하는 강조 텍스트 (예: 지원금) */
.program-grid .program-card__subsidy {
  font-family: var(--list-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--list-accent) !important;
}

/* portal accent chip.
   fallback rgba는 host accent 12% 고정 — 다른 portal에서 color-mix 미지원 환경에 떨어지면
   host orange가 잠깐 보일 수 있음. 모든 지원 portal이 color-mix 지원 브라우저 점유율과 함께 가는 것으로 합의됨. */
.program-grid .program-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(194, 65, 12, 0.12);
  background: color-mix(in srgb, var(--list-accent) 12%, transparent);
  color: var(--list-accent);
  font-family: var(--list-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

/* group-programs 동적 버튼 (리스트 내부에서만 적용) */
.program-grid .btn-apply,
.program-grid .btn-detail,
.program-grid .btn-closed {
  border-radius: 0 !important;
  font-family: var(--list-sans) !important;
  font-size: 14px !important;
  padding: 10px 20px !important;
  min-height: 44px !important;
}
.program-grid .btn-apply {
  background: var(--list-accent) !important;
  color: #fff !important;
  border: 1px solid var(--list-accent) !important;
}
.program-grid .btn-apply:hover { filter: brightness(0.88); }
.program-grid .btn-detail {
  background: transparent !important;
  color: var(--list-ink) !important;
  border: 1px solid var(--list-rule) !important;
}
.program-grid .btn-detail:hover { background: var(--list-rule-soft) !important; }
.program-grid .btn-closed {
  background: transparent !important;
  color: var(--list-ink3) !important;
  border: 1px solid var(--list-rule) !important;
}