@charset "utf-8";
/* 게시판-카드-모션-샘플 — 목록을 겹친 카드(왼쪽) + 목록(오른쪽)으로 보여준다.
   강조색은 사이트 색상·분류와 상관없이 짙은 회색 한 가지다 — 빨강 메인색이 경고처럼 보여서(최부장님 지시 2026-10-27, 5곳 공통).
   클래스는 테마와 겹치지 않게 bmc- 로 시작한다. */
.bmc-board{
  --bmc-ink:#1f2933; --bmc-mute:#6b7480; --bmc-line:#e1e4e8; --bmc-sheet:#fff;
  --bmc-accent:#4b5563;
  --bmc-soft:#eef2f6;
  --bmc-shadow:0 10px 30px rgba(20,30,45,.12),0 2px 6px rgba(20,30,45,.08);
  --bmc-dur:4200ms;
  word-break:keep-all;overflow-wrap:break-word;
}
@supports (background:color-mix(in srgb,red 10%,white)){
  .bmc-board{--bmc-soft:color-mix(in srgb,var(--bmc-accent) 9%,#fff)}
}
.bmc-board *{box-sizing:border-box}

/* 머리 — 전체 글 수 · 페이지 */
.bmc-head{border-bottom:2px solid var(--bmc-ink);padding-bottom:10px;margin-bottom:6px}
.bmc-total{margin:0;font-size:13px;color:var(--bmc-mute)}
.bmc-total b{color:var(--bmc-accent)}

.bmc-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:start;margin-top:28px}
/* 글이 없을 때 — 카드 한 장 + 뒤로 겹친 두 장(가상 요소) */
.bmc-empty{position:relative;max-width:520px;margin:64px auto 32px;padding-top:0}
.bmc-empty::before,.bmc-empty::after{content:"";position:absolute;left:0;right:0;top:0;height:100%;background:var(--bmc-sheet);border:1px solid var(--bmc-line);border-radius:16px;transform-origin:50% 0}
.bmc-empty::before{transform:translateY(-36px) scale(.9);opacity:.5}
.bmc-empty::after{transform:translateY(-18px) scale(.95);opacity:.78}
.bmc-empty-card{position:relative;z-index:1;background:var(--bmc-sheet);border:1px solid var(--bmc-line);border-radius:16px;box-shadow:var(--bmc-shadow);padding:30px 24px 26px;text-align:center}
.bmc-empty-card::before{content:"";position:absolute;inset:0 0 auto;height:5px;border-radius:16px 16px 0 0;background:var(--bmc-accent)}
.bmc-empty-tag{display:inline-block;font-size:12px;font-weight:700;color:var(--bmc-accent);border:1px solid var(--bmc-accent);border-radius:99px;padding:1px 10px}
.bmc-empty-card h3{margin:14px 0 6px;font-size:19px;line-height:1.45;font-weight:700;color:var(--bmc-ink)}
.bmc-empty-card p{margin:0;font-size:14px;line-height:1.6;color:var(--bmc-mute)}

/* 겹친 카드 — 카드 위치는 --p(앞에서 몇 번째) 값으로 계산한다 */
.bmc-stage{position:relative;height:280px;margin-top:40px;outline:none}
.bmc-card{--p:0;position:absolute;inset:0;background:var(--bmc-sheet);border:1px solid var(--bmc-line);border-radius:16px;box-shadow:var(--bmc-shadow);padding:22px 24px 18px;display:flex;flex-direction:column;gap:10px;cursor:pointer;
  transform:translateY(calc(var(--p) * -18px)) scale(calc(1 - var(--p) * .05));
  opacity:calc(1 - var(--p) * .22);z-index:calc(10 - var(--p));
  transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .55s ease;transform-origin:50% 0}
.bmc-card::before{content:"";position:absolute;inset:0 0 auto;height:5px;border-radius:16px 16px 0 0;background:var(--bmc-accent)}
.bmc-card[data-hide]{opacity:0;pointer-events:none}
/* 글씨는 맨 앞 카드에만 — 뒤 카드는 윗선만 비쳐 보인다 */
.bmc-card > *{transition:opacity .3s ease}
.bmc-card.back > *,.bmc-card.leave > *{opacity:0}
.bmc-card.leave{transform:translateY(46px) rotate(-2.5deg) scale(.98);opacity:0;z-index:9}
.bmc-card.snap,.bmc-card.snap > *{transition:none}
.bmc-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bmc-cat{font-size:12px;font-weight:700;color:var(--bmc-accent);border:1px solid var(--bmc-accent);border-radius:99px;padding:1px 10px}
.bmc-no{font-size:12px;color:var(--bmc-mute);font-variant-numeric:tabular-nums}
.bmc-card h3{margin:0;font-size:19px;line-height:1.45;font-weight:700}
.bmc-card h3 a{color:var(--bmc-ink);text-decoration:none}
.bmc-card p{margin:0;font-size:14px;line-height:1.6;color:var(--bmc-mute);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bmc-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--bmc-mute);border-top:1px solid var(--bmc-line);padding-top:10px}
.bmc-more{color:var(--bmc-accent);font-weight:700;text-decoration:none;white-space:nowrap}

/* 카드 아래 조작 줄 — 이전 · 순번 · 다음 · 진행 막대 · 멈춤 */
.bmc-ctrl{display:flex;align-items:center;gap:6px;margin-top:12px}
.bmc-ctrl button{font:inherit;font-size:11px;line-height:1;width:24px;height:24px;padding:0;border-radius:50%;border:1px solid var(--bmc-line);background:var(--bmc-sheet);color:var(--bmc-mute);cursor:pointer;display:grid;place-items:center}
.bmc-ctrl button:hover{border-color:var(--bmc-accent);color:var(--bmc-accent)}
.bmc-count{font-size:11px;color:var(--bmc-mute);font-variant-numeric:tabular-nums;min-width:2.8rem;text-align:center}
.bmc-count b{color:var(--bmc-ink)}
.bmc-progress{flex:1;height:2px;border-radius:1px;background:var(--bmc-line);overflow:hidden}
.bmc-progress i{display:block;height:100%;width:0;background:var(--bmc-accent)}
.bmc-progress i.run{animation:bmc-fill var(--bmc-dur) linear forwards}
.bmc-ctrl.paused .bmc-progress i.run{animation-play-state:paused}
@keyframes bmc-fill{to{width:100%}}

/* 오른쪽 목록 — 지금 앞에 있는 카드의 줄이 표시된다 */
.bmc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--bmc-line)}
.bmc-list li{display:grid;grid-template-columns:3.4rem minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:11px 8px;border-bottom:1px solid var(--bmc-line);cursor:pointer;position:relative;transition:background .3s}
.bmc-list li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bmc-accent);transform:scaleY(0);transition:transform .35s}
.bmc-list li.on{background:var(--bmc-soft)}
.bmc-list li.on::before{transform:scaleY(1)}
.bmc-lc{font-size:12px;font-weight:700;color:var(--bmc-accent);text-align:center;font-variant-numeric:tabular-nums}
.bmc-lt{font-size:15px;color:var(--bmc-ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bmc-list li.on .bmc-lt{font-weight:700}
.bmc-cmt{font-size:12px;color:var(--bmc-accent)}
.bmc-ld{font-size:12px;color:var(--bmc-mute);font-variant-numeric:tabular-nums}
.bmc-chk{position:relative;cursor:default}

.bmc-pages{margin-top:38px}

/* 899px 이하는 원본 스타일이 왼쪽 위에 분류 선택 상자(.bo_mo_cate, 폭 150px)를 띄운다 — 글 수는 그 옆으로 비킨다 */
@media (max-width:899px){
  .bmc-total{padding-left:160px;line-height:34px}
}

@media (max-width:760px){
  .bmc-layout{grid-template-columns:1fr}
  .bmc-stage{height:290px}
}
@media (prefers-reduced-motion:reduce){
  .bmc-card,.bmc-list li,.bmc-list li::before{transition:none}
}