/*
 * Promotion 이벤트 프론트 스킨: basic
 *
 * 색상: 프레임 스킨이 소유하는 --primary 를 소비한다 (도메인 --mublo-color-primary 우선).
 */
.pm-page {
    --pm-primary: var(--mublo-color-primary, var(--primary, #2563eb));
    --pm-primary-soft: color-mix(in srgb, var(--mublo-color-primary, var(--primary, #2563eb)) 9%, #fff);
    --pm-text: var(--mublo-text-primary, #111827);
    --pm-text-sub: var(--mublo-text-tertiary, #4b5563);
    --pm-text-muted: var(--mublo-text-muted, #6b7280);
    --pm-border: var(--mublo-border-muted, #e5e7eb);
    --pm-bg-muted: var(--mublo-bg-muted, #f8fafc);

    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 16px 60px;
}

/* ── 헤더 ── */
.pm-page__header { text-align: center; margin-bottom: 24px; }
.pm-page__title { font-size: 1.625rem; font-weight: 800; color: var(--pm-text); margin: 0 0 6px; }
.pm-page__title i { color: var(--pm-primary); }
.pm-page__subtitle { font-size: 0.9375rem; color: var(--pm-text-muted); margin: 0; }

/* ── 상태 탭 ── */
.pm-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; }
.pm-tabs__btn {
    padding: 8px 20px; border-radius: 999px; border: 1px solid var(--pm-border);
    background: #fff; color: var(--pm-text-sub); font-size: 0.875rem; font-weight: 600;
    text-decoration: none; transition: all 0.15s;
}
.pm-tabs__btn:hover { border-color: var(--pm-primary); color: var(--pm-primary); }
.pm-tabs__btn--active { background: var(--pm-primary); border-color: var(--pm-primary); color: #fff; }

/* ── 카드 그리드 ── */
.pm-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px;
}
.pm-card {
    display: block; border: 1px solid var(--pm-border); border-radius: 14px; overflow: hidden;
    background: #fff; text-decoration: none; transition: box-shadow 0.15s, transform 0.15s;
}
.pm-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); transform: translateY(-2px); }
.pm-card--ended { opacity: 0.65; }
.pm-card__media {
    position: relative; aspect-ratio: 16 / 9; background: var(--pm-bg-muted);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pm-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-card__media-ph { font-size: 2rem; color: #cbd5e1; }
.pm-card__body { padding: 14px 16px 16px; }
.pm-card__title {
    font-size: 1rem; font-weight: 700; color: var(--pm-text); margin: 0 0 8px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pm-card__period { font-size: 0.8125rem; color: var(--pm-text-sub); margin: 0 0 4px; }
.pm-card__period i, .pm-card__meta i { margin-right: 4px; color: var(--pm-text-muted); }
.pm-card__meta { font-size: 0.8125rem; color: var(--pm-primary); font-weight: 600; margin: 0; }

/* ── 상태 배지 ── */
.pm-badge {
    display: inline-block; padding: 3px 10px; border-radius: 6px;
    font-size: 0.6875rem; font-weight: 700; line-height: 1.4;
}
.pm-card__media .pm-badge { position: absolute; top: 10px; left: 10px; }
.pm-badge--ongoing { background: var(--pm-primary); color: #fff; }
.pm-badge--upcoming { background: #0ea5e9; color: #fff; }
.pm-badge--ended { background: #4b5563; color: #fff; }
.pm-badge--dday { position: absolute; top: 10px; right: 10px; left: auto !important; background: #ef4444; color: #fff; }

/* ── 빈 상태 ── */
.pm-empty { text-align: center; padding: 70px 20px; color: var(--pm-text-muted); }
.pm-empty i { font-size: 2.5rem; color: #cbd5e1; display: block; margin-bottom: 12px; }
.pm-empty p { margin: 0 0 16px; line-height: 1.6; }

/* ── 페이지네이션 ── */
.pm-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 32px; }
.pm-pagination__btn {
    min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--pm-border); border-radius: 8px; background: #fff;
    color: var(--pm-text-sub); font-size: 0.875rem; text-decoration: none; transition: all 0.15s;
}
.pm-pagination__btn:hover { border-color: var(--pm-primary); color: var(--pm-primary); }
.pm-pagination__btn--active { background: var(--pm-primary); border-color: var(--pm-primary); color: #fff; }

/* ══ 상세 ══ */
.pm-view { max-width: 860px; }
.pm-view__header { padding-bottom: 18px; border-bottom: 1px solid var(--pm-text); margin-bottom: 24px; text-align: left; }
.pm-view__title { font-size: 1.5rem; font-weight: 800; color: var(--pm-text); margin: 10px 0 10px; line-height: 1.35; }
.pm-view__meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.8125rem; color: var(--pm-text-sub); }
.pm-view__meta i { margin-right: 4px; }

.pm-view__content { line-height: 1.8; font-size: 0.9375rem; color: var(--pm-text); min-height: 120px; }
.pm-view__content img { max-width: 100%; height: auto; border-radius: 8px; }

/* ── 공유 ── */
.pm-share {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin: 36px 0; padding: 18px; background: var(--pm-bg-muted); border-radius: 14px;
}
.pm-share__label { font-size: 0.875rem; font-weight: 700; color: var(--pm-text); }
.pm-share__btns { display: flex; gap: 8px; }
.pm-share__btn {
    width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.15s, opacity 0.15s;
}
.pm-share__btn:hover { transform: translateY(-2px); opacity: 0.9; }
.pm-share__btn--kakao { background: #fee500; color: #191919; }
.pm-share__btn--facebook { background: #1877f2; color: #fff; }
.pm-share__btn--x { background: #0f1419; color: #fff; }
.pm-share__btn--native { background: var(--pm-primary); color: #fff; }
.pm-share__btn--link { background: #fff; border: 1px solid var(--pm-border); color: var(--pm-text-sub); }

/* ── 댓글 ── */
.pm-comments { margin-top: 12px; }
.pm-comments__title { font-size: 1.0625rem; font-weight: 700; color: var(--pm-text); margin: 0 0 14px; }
.pm-comments__title small { font-size: 0.8125rem; color: var(--pm-primary); font-weight: 600; margin-left: 6px; }

.pm-comment-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.pm-comment-form textarea {
    width: 100%; padding: 12px 14px; border: 1px solid var(--pm-border); border-radius: 10px;
    font-size: 0.875rem; font-family: inherit; resize: vertical; box-sizing: border-box; line-height: 1.6;
}
.pm-comment-form textarea:focus { outline: none; border-color: var(--pm-primary); }
.pm-comment-form__submit {
    align-self: flex-end; padding: 10px 26px; border: none; border-radius: 10px;
    background: var(--pm-primary); color: #fff; font-size: 0.875rem; font-weight: 700; cursor: pointer;
    transition: opacity 0.15s;
}
.pm-comment-form__submit:hover { opacity: 0.85; }

.pm-comment-login, .pm-comment-closed {
    padding: 16px; text-align: center; background: var(--pm-bg-muted); border-radius: 10px;
    font-size: 0.875rem; color: var(--pm-text-sub); margin-bottom: 20px;
}
.pm-comment-login a { color: var(--pm-primary); font-weight: 700; text-decoration: none; }

.pm-comment-list { list-style: none; margin: 0; padding: 0; }
.pm-comment-empty { padding: 24px 0; text-align: center; color: var(--pm-text-muted); font-size: 0.875rem; }
.pm-comment-item { padding: 14px 2px; border-bottom: 1px solid var(--mublo-border-subtle, #f0f0f0); }
.pm-comment-item__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pm-comment-item__head strong { font-size: 0.875rem; color: var(--pm-text); }
.pm-comment-item__date { font-size: 0.75rem; color: var(--pm-text-muted); }
.pm-comment-item__delete {
    margin-left: auto; border: none; background: none; color: var(--pm-text-muted);
    font-size: 0.75rem; cursor: pointer; padding: 2px 6px;
}
.pm-comment-item__delete:hover { color: #ef4444; }
.pm-comment-item__body { font-size: 0.875rem; color: var(--pm-text-sub); line-height: 1.65; margin: 0; }

/* ── 상세 푸터 ── */
.pm-view__footer { margin-top: 32px; text-align: center; }
.pm-view__list-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 24px; border: 1px solid var(--pm-border); border-radius: 10px;
    background: #fff; color: var(--pm-text-sub); font-size: 0.875rem; font-weight: 600;
    text-decoration: none; transition: all 0.15s;
}
.pm-view__list-btn:hover { border-color: var(--pm-primary); color: var(--pm-primary); }

/* ── 반응형 ── */
@media (max-width: 640px) {
    .pm-page { padding: 20px 14px 48px; }
    .pm-page__title { font-size: 1.375rem; }
    .pm-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .pm-card__body { padding: 10px 12px 12px; }
    .pm-card__title { font-size: 0.875rem; }
    .pm-view__title { font-size: 1.25rem; }
    .pm-share { flex-direction: column; gap: 10px; }
}
@media (max-width: 400px) {
    .pm-grid { grid-template-columns: 1fr; }
}