/*
 * Promotion 이벤트 프론트 스킨: basic
 *
 * 색상은 tokens.css 의 Tier 2 semantic 토큰만 소비한다. 다크 모드는 그 토큰이
 * `.dark` 에서 remap 되면서 따라오므로, 이 파일에 별도의 다크 블록을 두지 않는다.
 * (예외는 아래 SNS 브랜드색 — 브랜드 규정상 모드와 무관하게 고정이다.)
 *
 * 이전에는 `--mublo-text-primary` 같은 이름을 참조했는데 그 변수들은 레포 어디에도
 * 정의된 적이 없어, 전부 뒤에 붙은 라이트 전용 hex 폴백으로 떨어졌다. 그래서 다크
 * 모드에서 배경만 어두워지고 글자·카드가 밝은 채로 남았다.
 */
.pm-page {
    --pm-primary: var(--primary);
    --pm-primary-fg: var(--primary-foreground);
    --pm-text: var(--foreground);
    --pm-text-sub: color-mix(in srgb, var(--foreground) 75%, transparent);
    --pm-text-muted: var(--muted-foreground);
    --pm-border: var(--border);
    --pm-border-subtle: var(--border-subtle);
    --pm-surface: var(--card);
    --pm-bg-muted: var(--muted);
    /* 썸네일 없는 카드의 자리표시 아이콘 — 배경 위에서 겨우 보이는 정도 */
    --pm-placeholder: color-mix(in srgb, var(--muted-foreground) 55%, transparent);

    /* 거터(상하·좌우)는 코어 `.mublo-content` 가 전담한다. 여기서 padding 을
       더하면 좌우가 이중으로 먹어 다른 페이지보다 콘텐츠가 좁아진다.

       폭은 사이트 폭(--content-max-width)을 따라가지 않고 고정한다. 그 값은
       도메인 설정(--site-max-width)에 묶여 있어서, 운영자가 넓히면 열 수가
       같이 늘고 페이지당 12개가 안 나눠떨어져 마지막 행이 깨진다. */
    max-width: 1024px;
    margin: 0 auto;
}

/* ── 헤더 ── */
.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: var(--pm-surface); 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: var(--pm-primary-fg); }

/* ── 카드 그리드 ── */
/* 하한 300px = 넓은 화면에서 3열(카드 328px), 좁아지면 2열 → 1열.
   페이지당 12개는 1·2·3·4열 전부로 나눠떨어져 어느 폭에서도 마지막 행이 남지 않는다. */
.pm-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;
}
.pm-card {
    display: block; border: 1px solid var(--pm-border); border-radius: 14px; overflow: hidden;
    background: var(--pm-surface); 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: var(--pm-placeholder); }
.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: var(--pm-primary-fg); }
.pm-badge--upcoming { background: var(--color-sky-500); color: var(--color-white); }
.pm-badge--ended { background: var(--pm-text-muted); color: var(--pm-surface); }
.pm-badge--dday { position: absolute; top: 10px; right: 10px; left: auto !important; background: var(--destructive); color: var(--destructive-foreground); }

/* ── 빈 상태 ── */
.pm-empty { text-align: center; padding: 70px 20px; color: var(--pm-text-muted); }
.pm-empty i { font-size: 2.5rem; color: var(--pm-placeholder); 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: var(--pm-surface);
    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: var(--pm-primary-fg); }

/* ══ 상세 ══ */
/* 읽는 화면은 사이트 표준 본문 폭(Board 상세와 동일한 960) 을 쓴다. */
.pm-view { max-width: 960px; }
.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__hero { margin: 0 0 24px; text-align: center; }
.pm-view__hero img {
    display: block; margin: 0 auto; border-radius: 14px;
    max-width: 100%; height: auto; max-height: 480px; width: auto;
}

.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; }
/* SNS 브랜드색은 규정상 고정이다 — 토큰화하지 않는다(프레임 푸터와 같은 취급). */
.pm-share__btn--kakao { background: #fee500; color: #191919; }
.pm-share__btn--facebook { background: #1877f2; color: #fff; }
.pm-share__btn--x { background: #0f1419; color: #fff; }
/* X 만 예외: 브랜드색이 거의 검정이라 다크 배경에서 버튼이 사라진다.
   공식 가이드의 반전 조합(흰 바탕·검정 로고)으로 바꾼다. */
.dark .pm-share__btn--x { background: #fff; color: #0f1419; }
.pm-share__btn--native { background: var(--pm-primary); color: var(--pm-primary-fg); }
.pm-share__btn--link { background: var(--pm-surface); 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;
    /* 바탕·글자를 명시하지 않으면 다크에서 흰 입력창만 남는다 */
    background: var(--pm-surface); color: var(--pm-text);
    font-size: 0.875rem; font-family: inherit; resize: vertical; box-sizing: border-box; line-height: 1.6;
}
.pm-comment-form textarea::placeholder { color: var(--pm-text-muted); }
.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: var(--pm-primary-fg); 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(--pm-border-subtle); }
.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: var(--destructive); }
.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: var(--pm-surface); 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__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; }
}