/* PM-03 C2: 生活布告栏 (Listings). Uses the shared design tokens from
   styles.css only; no global overrides. Mobile first. */

.listings-page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.listings-page__heading {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.listings-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 0.625rem;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.listings-button[hidden] {
  display: none;
}

.listings-button:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.listings-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.listings-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.listings-button--primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
}

.listings-button--primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  color: #ffffff;
}

.listings-button--danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.listings-button--danger:hover:not(:disabled) {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-hover);
  color: var(--color-danger-hover);
}

/* Tabs */
.listings-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
}

.listings-tabs[hidden] {
  display: none;
}

.listings-tabs::-webkit-scrollbar {
  display: none;
}

.listings-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.listings-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.listings-tab--active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
}

.listings-tab--active:hover {
  color: #ffffff;
}

.listings-note {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-meta);
  color: var(--color-text-secondary);
}

/* Status */
.listings-status {
  padding: var(--space-6) 0;
  color: var(--color-text-secondary);
  text-align: center;
}

.listings-status[hidden] {
  display: none;
}

.listings-status--error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-error);
}

/* Grid of cards */
.listings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--card-gap);
  list-style: none;
}

.listings-more {
  display: flex;
  justify-content: center;
  padding-top: var(--space-6);
}

.listing-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  text-decoration: none;
}

.listing-card--link {
  height: 100%;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.listing-card--link:hover,
.listing-card--link:focus-visible {
  outline: none;
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.listing-card--ended {
  opacity: 0.72;
}

.listing-card__badges,
.listing-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.listing-card__title {
  font-size: var(--font-size-card-title);
  font-weight: 600;
  line-height: var(--line-height-tight);
  overflow-wrap: anywhere;
}

.listing-card__summary {
  font-weight: 600;
  color: var(--color-text);
}

.listing-card__meta {
  font-size: var(--font-size-meta);
  color: var(--color-text-secondary);
}

.listing-badge,
.listing-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-label);
  font-weight: 600;
}

.listing-badge {
  background: var(--color-primary-light);
  color: var(--color-primary-active);
}

.listing-badge--secondhand { background: #fdebd9; color: #8a4213; }
.listing-badge--volunteer { background: #e3f4ea; color: #1f6b43; }
.listing-badge--part_time { background: #ece6fb; color: #5a32a8; }

.listing-status-badge--active { background: var(--color-success-bg); color: var(--color-success); }
.listing-status-badge--closed,
.listing-status-badge--expired { background: var(--color-surface-subtle); color: #475569; }
.listing-status-badge--sold { background: #1e293b; color: #ffffff; }

/* Detail */
.listing-detail {
  max-width: var(--reading-width);
}

.listings-back {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-bottom: var(--space-3);
  color: var(--color-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.listings-back::before {
  content: "←";
  margin-right: 0.375rem;
}

.listing-detail__card {
  gap: var(--space-4);
  padding: var(--space-6);
}

.listing-detail__card[hidden] {
  display: none;
}

.listing-detail__title {
  font-size: clamp(1.5rem, 4vw, 1.875rem);
  font-weight: 700;
  line-height: var(--line-height-tight);
  overflow-wrap: anywhere;
}

.listing-detail__meta {
  font-size: var(--font-size-meta);
  color: var(--color-text-secondary);
}

.listing-banner {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
}

.listing-banner[hidden] {
  display: none;
}

.listing-banner p:first-child {
  font-weight: 600;
}

.listing-banner--sold {
  background: #1e293b;
  border-color: #1e293b;
  color: #ffffff;
}

.listing-banner__sub {
  margin-top: var(--space-1);
  font-size: var(--font-size-meta);
  opacity: 0.85;
}

.listing-facts {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  font-size: 0.9375rem;
}

.listing-facts:empty {
  display: none;
}

.listing-facts dt {
  color: var(--color-text-secondary);
}

.listing-facts dd {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.listing-detail__section {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.listing-detail__section[hidden] {
  display: none;
}

.listing-detail__section-title {
  font-size: 1.0625rem;
  font-weight: 700;
}

.listing-detail__description {
  line-height: var(--line-height-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.listing-contact__message {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.listing-contact__message[hidden] {
  display: none;
}

.listing-contact__message--warn {
  color: var(--color-warning);
}

.listing-contact__list {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  align-items: center;
}

.listing-contact__list[hidden] {
  display: none;
}

.listing-contact__list dt {
  color: var(--color-text-secondary);
}

.listing-contact__list dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.listing-contact__list a {
  color: var(--color-primary);
}

.listing-contact__copy {
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--font-size-label);
  cursor: pointer;
}

.listing-contact__hint {
  font-size: var(--font-size-label);
  color: var(--color-text-secondary);
}

.listing-owner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.listing-confirm {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
}

.listing-confirm[hidden],
.listing-owner__message[hidden] {
  display: none;
}

.listing-owner__message {
  color: var(--color-error);
  font-size: 0.9375rem;
}

/* Form */
.listings-form-page__inner {
  max-width: 40rem;
}

.listing-form {
  display: grid;
  gap: var(--space-2);
}

.listing-form[hidden],
.listing-form__section[hidden],
.listing-form [data-field][hidden] {
  display: none;
}

.listing-form fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.listing-type-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.listing-type-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  cursor: pointer;
}

.listing-type-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  font-weight: 600;
}

.listing-type-option:has(input:disabled) {
  cursor: not-allowed;
}

.listing-type-option input {
  accent-color: var(--color-primary);
}

.listing-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-4);
}

.listing-form__hint {
  margin-top: var(--space-1);
  font-size: var(--font-size-label);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.listing-form__hint[hidden],
.listing-form .form-error[hidden] {
  display: none;
}

.listing-form__contacts {
  padding: var(--space-4) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm);
}

.listing-form__expiry {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.listing-form__expiry--warn {
  color: var(--color-warning);
  font-weight: 600;
}

.listing-form__result {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-error-bg);
  color: var(--color-error);
}

.listing-form__result[hidden] {
  display: none;
}

@media (min-width: 640px) {
  .listings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .listing-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .listing-type-options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .listings-page .ui-page__content:not(.listing-detail) {
    max-width: var(--home-content-width);
  }

  .listings-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .listing-detail__card {
    padding: var(--space-4);
  }

  .listing-facts,
  .listing-contact__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .listing-facts dd,
  .listing-contact__list dd {
    margin-bottom: var(--space-2);
  }
}

/* ── PM-03 C3: images ─────────────────────────────────────────────────── */

/* List card cover (first image, lazily loaded) */
.listing-card__media {
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-1);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--color-bg);
}

.listing-card__media-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Detail gallery: horizontal scroll-snap strip, one image per view */
.listing-gallery {
  margin: var(--space-2) 0;
}

.listing-gallery__track {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  border-radius: var(--radius);
}

.listing-gallery__track:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.listing-gallery__item {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
  background: var(--color-bg);
  border-radius: var(--radius);
  overflow: hidden;
}

.listing-gallery__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 28rem;
  object-fit: contain;
}

.listing-gallery__count {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: var(--font-size-label);
}

.listing-gallery__message {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-meta);
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .listing-gallery__image {
    max-height: 70vw;
  }
}

/* PO 2026-10-23: photos no larger than about half the screen; condition explained under its value. */
.listings-page .media-carousel__viewport { max-height: min(46vh, 24rem); }
.listing-detail__fact-hint { display: block; margin-top: 0.2rem; font-size: 0.85rem; color: #64748b; font-weight: 400; }

/* Volunteer rules box + unpaid confirmation (PO 2026-10-25) */
.listing-volunteer-notice {
  margin: 0 0 var(--space-4); padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg, #ecfdf5, #f0f9ff); border: 1px solid #a7f3d0; color: #064e3b;
}
.listing-volunteer-notice__title { margin: 0 0 8px; font-size: 1rem; font-weight: 800; }
.listing-volunteer-notice__rules { margin: 0 0 10px; padding-left: 1.1rem; display: grid; gap: 6px; font-size: 0.875rem; line-height: 1.55; }
.listing-volunteer-notice__rules strong { color: #b91c1c; }
.listing-volunteer-notice__detail { margin: 0 0 6px; font-size: 0.875rem; font-weight: 700; }
.listing-volunteer-notice__checklist { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 4px 12px; font-size: 0.8125rem; line-height: 1.5; color: #065f46; }
.listing-volunteer-notice__checklist li::before { content: "✓ "; font-weight: 800; color: #059669; }
.listing-volunteer-confirm { padding: 12px 14px; border-radius: 12px; background: #fff7ed; border: 1px solid #fed7aa; font-weight: 600; }

/* 봉사활동 KLW 직접 신청 (PO 2026-10-25) */
.va-section { padding: 16px; border-radius: 16px; background: linear-gradient(135deg, #eff6ff, #ecfdf5); border: 1px solid #bfdbfe; }
.va-lead { margin: 0 0 8px; color: #1e3a8a; font-weight: 600; line-height: 1.5; }
.va-count { margin: 0 0 10px; font-size: 0.875rem; color: #047857; font-weight: 700; }
.va-start { width: 100%; min-height: 3rem; font-size: 1rem; }
.va-muted { margin: 0; color: var(--color-text-secondary, #64748b); font-size: 0.875rem; }
.va-hint { margin: 2px 0 6px; color: var(--color-text-secondary, #64748b); font-size: 0.8125rem; line-height: 1.5; }
.va-error { margin: 8px 0; color: #b91c1c; font-weight: 600; }
.va-success { margin: 0; padding: 12px; border-radius: 12px; background: #dcfce7; color: #166534; font-weight: 700; }
.va-closed { margin: 0; font-weight: 700; color: #64748b; }
.va-form { display: grid; gap: 4px; margin-top: 12px; padding: 14px; border-radius: 14px; background: #ffffff; border: 1px solid #dbeafe; }
.va-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.va-lang, .va-radio { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #d9e3f0; border-radius: 999px; background: #f8fafc; font-size: 0.875rem; cursor: pointer; }
.va-lang:has(input:checked), .va-radio:has(input:checked) { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; font-weight: 700; }
.va-method { display: flex; gap: 8px; margin-bottom: 6px; }
.va-consent { margin: 8px 0 4px; padding: 12px; border-radius: 12px; background: #fff7ed; border: 1px solid #fed7aa; }
.va-submit { margin-top: 8px; min-height: 3rem; }
.va-mine { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-weight: 700; }
.va-all-link { display: inline-block; margin-top: 10px; font-weight: 700; color: #1d4ed8; }
.va-status { display: inline-flex; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 800; background: #e2e8f0; color: #334155; }
.va-status--applied { background: #fef3c7; color: #92400e; }
.va-status--accepted { background: #dcfce7; color: #166534; }
.va-status--declined { background: #fee2e2; color: #991b1b; }
.va-list { display: grid; gap: 10px; }
.va-applicant, .va-mine-card { display: block; padding: 12px 14px; border-radius: 14px; background: #ffffff; border: 1px solid #e2e8f0; color: inherit; text-decoration: none; }
.va-applicant__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.va-applicant__facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 0.875rem; }
.va-applicant__facts dt { color: #64748b; }
.va-applicant__facts dd { margin: 0; overflow-wrap: anywhere; }
.va-applicant__actions { display: flex; gap: 8px; margin-top: 10px; }
.va-listing-link { margin-top: 8px; font-weight: 800; color: #1e3a8a; }
.va-tabs { display: flex; gap: 8px; margin: 12px 0; }
.va-tab { padding: 8px 16px; border-radius: 999px; border: 1px solid #d9e3f0; background: #fff; font-weight: 700; cursor: pointer; }
.va-tab[aria-selected="true"] { background: #0f172a; color: #fff; border-color: #0f172a; }
.va-empty { display: grid; gap: 10px; justify-items: start; }
@media (max-width: 520px) { .va-applicant__facts { grid-template-columns: 1fr; } .va-applicant__facts dt { margin-top: 4px; } }
.va-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.va-bar__link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-weight: 700; font-size: 0.875rem; text-decoration: none; }
.va-bar__link:hover { background: #d1fae5; }
.vg-steps { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 12px; counter-reset: vg; }
.vg-step { position: relative; padding: 14px 16px 14px 56px; border-radius: 16px; background: #fff; border: 1px solid #e2e8f0; }
.vg-step::before { counter-increment: vg; content: counter(vg); position: absolute; left: 14px; top: 14px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #2563eb; color: #fff; font-weight: 800; }
.vg-step h2 { margin: 0 0 4px; font-size: 1rem; }
.vg-step p { margin: 0; line-height: 1.6; color: #334155; font-size: 0.9375rem; }
.vg-phrases { display: grid; gap: 8px; margin: 8px 0 16px; }
.vg-phrase { padding: 12px 14px; border-radius: 14px; background: #f8fafc; border: 1px solid #e2e8f0; }
.vg-phrase__ko { margin: 0; font-weight: 700; font-size: 1rem; }
.vg-phrase__tr { margin: 4px 0 0; color: #64748b; font-size: 0.875rem; }
.vg-note { padding: 12px 14px; border-radius: 14px; background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; line-height: 1.6; }
.vg-cta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.listing-volunteer-notice__ai { margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed #a7f3d0; font-size: 0.8125rem; line-height: 1.5; color: #065f46; }
/* 1365 imports (PO 2026-10-25) */
.listing-badge--source { background: #e0e7ff; color: #3730a3; }
.listing-badge--welcome { background: #dcfce7; color: #166534; }
.listing-badge--ko-none, .listing-badge--ko-basic { background: #ecfeff; color: #155e75; }
.listing-badge--ko-conversational { background: #fef9c3; color: #854d0e; }
.listing-badge--ko-fluent { background: #fee2e2; color: #991b1b; }
.listing-detail__original { margin: -4px 0 6px; color: #64748b; font-size: 0.875rem; }
.va-filters { margin-top: 0; }