/* ============================================================
   커뮤니티 (Figma 10-1 커뮤니티_자유게시판) — 리스트
   포인트 컬러 #1A56DB / Noto Sans KR / px→rem(÷16)
   게시판 공용(.cm-*) — 자유게시판 외 다른 게시판도 재사용한다.
   ============================================================ */

.cm-main {
    /* 폭·좌우여백은 상위 .page-layout(max-width 1440 + gutter 32px)이 담당한다.
       여기서 max-width/padding을 다시 주면 이중 적용되어 게시판만 좁아지므로 주지 않는다(타 페이지와 폭 통일). */
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.375rem; /* 22px */
}

/* 고객센터(공지사항·이벤트) — Figma 12-01 세로 리듬을 그대로 적용한다.
   시안: 툴바 Container `padding: 20px 0 12px`(타이틀→검색 20px, 검색→리스트 12px),
        리스트→페이저 = Main `padding-bottom: 40px` + Frame5340 `gap: 30px` = 70px.
   균등 gap(22px)으로는 이 리듬을 낼 수 없어 gap을 0으로 두고 요소별로 간격을 준다.
   ※ 말머리 칩은 시안에서도 `opacity: 0`(숨김)이며 툴바 줄 높이(36px)만 유지된다. */
.cm-main--cs { gap: 0; }
.cm-main--cs .cm-toolbar { padding: 1.25rem 0 0.75rem; /* 20px / 12px */ }
/* 페이저는 자체 padding-top 8px을 갖고 있다 → 시안값(4px)으로 맞추고 나머지를 margin으로 줘 합계 70px. */
.cm-main--cs .cm-pager { margin-top: 4.125rem; padding-top: 0.25rem; /* 66 + 4 = 70px */ }

/* ── 헤더: 타이틀 + 글쓰기 ── */
.cm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cm-head-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* 공통 _PageTitle을 cm-head-title(가로 flex) 안에서 쓸 때: 박스 하단 여백 제거(배지·버튼과 세로 중앙 정렬) */
.cm-head-title .page-title-box { margin-bottom: 0; }

.cm-bar {
    width: 0.25rem;
    height: 1.25rem;
    background: #1A56DB;
    border-radius: 1rem;
    flex: none;
}

.cm-title {
    margin: 0;
    font-size: 1.375rem; /* 22px */
    font-weight: 800;
    line-height: 2rem;
    letter-spacing: -0.034rem;
    color: #1F2430;
}

.cm-title-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    background: #EEF3FF;
    border-radius: 0.25rem;
    font-size: 0.6875rem; /* 11px */
    font-weight: 700;
    line-height: 1rem;
    color: #1A56DB;
}

.cm-write {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    background: #1A56DB;
    border-radius: 0.5rem;
    font-size: 0.84375rem; /* 13.5px */
    font-weight: 700;
    line-height: 1.25rem;
    color: #FFFFFF;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.cm-write:hover { background: #1648B8; }
.cm-write i { font-size: 0.875rem; }

/* ── 필터 칩 + 검색 ── */
.cm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.cm-chips {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cm-chip {
    padding: 0.375rem 0.875rem;
    border: 1px solid #E8EBF0;
    border-radius: 1rem;
    background: #FFFFFF;
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
    line-height: 1.1875rem;
    color: #5B6473;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.cm-chip.is-active {
    background: #1A56DB;
    border-color: #1A56DB;
    color: #FFFFFF;
}

.cm-search {
    position: relative;
    width: 8.125rem; /* 130px */
    max-width: 100%;
    margin-left: auto; /* 말머리 칩이 없는 게시판(고객센터)에서도 우측 정렬 유지 */
}

.cm-search > i {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem;
    color: #98A0AE;
    pointer-events: none;
}

.cm-search-input {
    width: 100%;
    height: 2.0625rem; /* 33px */
    padding: 0 0.75rem 0 2rem;
    border: 1px solid #E8EBF0;
    border-radius: 0.5rem;
    background: #FFFFFF;
    font-size: 0.8125rem;
    color: #1F2430;
    outline: none;
}

.cm-search-input::placeholder { color: rgba(31, 36, 48, 0.5); }
.cm-search-input:focus { border-color: #1A56DB; }

/* ── 게시판 테이블 ── */
.cm-board {
    border: 1px solid #E8EBF0;
    border-radius: 0.75rem;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04);
    overflow: hidden;
}

.cm-board-head,
.cm-row {
    display: grid;
    grid-template-columns: 3rem 3.5rem 1fr 7.8125rem 4rem 3.5rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

/* 작성자 컬럼 없는 게시판(고객센터: 번호·말머리·제목·작성일·조회) */
.cm-board--noauthor .cm-board-head,
.cm-board--noauthor .cm-row {
    grid-template-columns: 3rem 3.5rem 1fr 4rem 3.5rem;
}

/* ── 이벤트(고객센터) 목록: 상태 · 제목/기간 · 조회 ── */
.cm-board-head--event,
.cm-erow {
    display: grid;
    grid-template-columns: 4.5rem 1fr 4rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

.cm-board-head--event .cm-ecol-views { text-align: right; }

.cm-erow {
    border-bottom: 1px solid #F1F3F7;
    text-decoration: none;
    transition: background 0.12s ease;
}

.cm-erow:last-child { border-bottom: 0; }
.cm-erow:hover { background: rgba(238, 243, 255, 0.5); }

.cm-estatus {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.6875rem; /* 11px */
    font-weight: 800;
    line-height: 1.2;
}

.cm-estatus.is-ongoing { background: #1A56DB; color: #FFFFFF; }
.cm-estatus.is-upcoming { background: #EEF3FF; color: #1A56DB; }
.cm-estatus.is-ended { background: #F1F3F7; color: #98A0AE; }
.cm-estatus.is-always { background: #EEF3FF; color: #1A56DB; }   /* 기간 미설정=상시 */

.cm-einfo { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }

.cm-etitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    color: #1F2430;
}

.cm-emeta {
    display: flex;
    align-items: center;
    font-size: 0.71875rem; /* 11.5px */
    color: #98A0AE;
}

.cm-emeta i { font-size: 0.8125rem; margin-right: 0.25rem; }
.cm-emeta-sep { margin: 0 0.375rem; }
.cm-eviews { text-align: right; font-size: 0.75rem; color: #98A0AE; }

@media (max-width: 600px) {
    /* 모바일: 우측 조회 숨김(기간 줄에 조회가 이미 표시됨) */
    .cm-board-head--event,
    .cm-erow { grid-template-columns: 4rem 1fr; }
    .cm-ecol-views,
    .cm-erow .cm-eviews { display: none; }
}

.cm-board-head {
    background: rgba(244, 246, 249, 0.5);
    border-bottom: 1px solid #F1F3F7;
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    color: #98A0AE;
}

.cm-board-head .cm-col-no,
.cm-board-head .cm-col-date,
.cm-board-head .cm-col-views { text-align: center; }
.cm-board-head .cm-col-views { text-align: right; }

/* 행 */
.cm-row {
    border-bottom: 1px solid #F1F3F7;
    text-decoration: none;
    transition: background 0.12s ease;
}

.cm-row:last-child { border-bottom: 0; }
.cm-row:hover { background: rgba(238, 243, 255, 0.5); }
.cm-row.is-notice { background: rgba(238, 243, 255, 0.3); }

/* 번호 */
.cm-col-no {
    text-align: center;
    font-size: 0.78125rem; /* 12.5px */
    font-weight: 600;
    color: #98A0AE;
}

.cm-pin { color: #98A0AE; font-size: 0.8125rem; }

/* 유형 배지 */
.cm-type {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background: #EEF3FF;
    color: #1A56DB;
    font-size: 0.6875rem; /* 11px */
    font-weight: 700;
    line-height: 1rem;
}

.cm-type.is-notice {
    background: #1A56DB;
    color: #FFFFFF;
    font-weight: 800;
}

/* 제목 */
.cm-col-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.cm-hot {
    flex: none;
    padding: 0.125rem 0.25rem;
    background: #1A56DB;
    border-radius: 0.25rem;
    font-size: 0.625rem; /* 10px */
    font-weight: 800;
    line-height: 0.875rem;
    color: #FFFFFF;
}

.cm-row-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    line-height: 1.25rem;
    color: #1F2430;
}

.cm-comment {
    flex: none;
    font-size: 0.78125rem; /* 12.5px */
    font-weight: 700;
    color: #1A56DB;
}

/* 작성자 */
.cm-col-author {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.cm-avatar {
    flex: none;
    width: 1.625rem;
    height: 1.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #F1F3F7;
    font-size: 0.5rem; /* 8px */
    font-weight: 700;
    color: #5B6473;
}

.cm-author-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78125rem; /* 12.5px */
    font-weight: 400;
    color: #5B6473;
}

/* 날짜 / 조회 */
.cm-col-date {
    text-align: center;
    font-size: 0.75rem;
    color: #98A0AE;
}

.cm-col-views {
    text-align: right;
    font-size: 0.75rem;
    color: #98A0AE;
}

/* ── 페이지네이션 ── */
.cm-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;       /* 6px — 시안 gap */
    padding-top: 0.9375rem; /* 15px — 시안 Container `padding: 15px 0 0` */
}

.cm-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border: 1px solid #E8EBF0;
    border-radius: 0.5rem;
    background: #FFFFFF;
    font-size: 0.84375rem; /* 13.5px */
    font-weight: 700;
    color: #5B6473;
    text-decoration: none;
    transition: all 0.12s ease;
}

.cm-page:hover { border-color: #1A56DB; color: #1A56DB; }

.cm-page.is-active {
    background: #1A56DB;
    border-color: #1A56DB;
    color: #FFFFFF;
}

/* 이전/다음 — 시안: `padding: 5.57px 11.57px`(49.14×32.14) · `border: 1px solid #E8EBF0` · radius 8px · 13px/700.
   **background 선언이 없다(투명)** — 흰 배경은 숫자 버튼(.cm-page) 전용이라 텍스트 버튼에서 되돌린다.
   페이지 배경이 #F0F4F8이라 투명 버튼은 회색빛으로 보인다(흰 배경 화면에선 흰색으로 보임). */
.cm-page-text {
    height: 2rem;            /* 32px — 숫자 버튼(36px)보다 낮다 */
    padding: 0 0.75rem;      /* 12px ≒ 시안 11.57px → 총폭 50px ≒ 49.14px */
    background: transparent;
    font-size: 0.8125rem;    /* 13px — 숫자는 13.5px */
}

.cm-page.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ============================================================
   상세 (Figma 10-1-1 커뮤니티_자유게시판_상세) — .cmd-*
   ============================================================ */
/* 상세 상단 '목록으로' 뒤로가기 */
.cmd-back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.84375rem; /* 13.5px */
    font-weight: 700;
    color: #5B6473;
    text-decoration: none;
}

.cmd-back:hover { color: #1A56DB; }
.cmd-back i { font-size: 0.875rem; }

.cmd-article {
    background: #FFFFFF;
    border: 1px solid #E8EBF0;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04);
    overflow: hidden;
}

/* 글 헤더 */
.cmd-post-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #E8EBF0;
}

.cmd-title {
    margin: 0;
    font-size: 1.1875rem; /* 19px */
    font-weight: 800;
    line-height: 1.625rem;
    color: #1F2430;
}

.cmd-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    font-size: 0.78125rem; /* 12.5px */
    line-height: 1.125rem;
    color: rgba(31, 36, 48, 0.6);
}

.cmd-meta-left,
.cmd-meta-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cmd-meta-author { font-weight: 500; color: rgba(31, 36, 48, 0.8); }
.cmd-meta-sep { color: rgba(31, 36, 48, 0.35); }

/* 고객센터 상세 헤더 — 말머리 배지 + 작성자(같은 줄), 제목 아래 날짜·조회(좌측 정렬) */
.cmd-head-top { display: flex; align-items: center; gap: 0.5rem; }
.cmd-meta-start { justify-content: flex-start; gap: 0.5rem; }

/* 본문 */
.cmd-body {
    display: flex;
    flex-direction: column;
    gap: 0; /* 문단(p) 사이 간격 제거 — Quill 자체 단락/빈줄로 간격 처리 */
    padding: 1.5rem 1.25rem;
    font-size: 0.90625rem; /* 14.5px */
    line-height: 1.5rem;
    color: #1F2430;
}

.cmd-body p { margin: 0; }

.cmd-rules {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* 추천 / 목록 */
.cmd-actions {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;   /* 좌 여백 · 추천(중앙) · 액션(우). 절대배치 대신 grid로 겹침 방지 */
    align-items: center;
    padding: 1rem 1.25rem;
    border-top: 1px solid #E8EBF0;
}

.cmd-recommend {
    grid-column: 2;   /* 중앙 칼럼 */
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 3rem;
    border: 1px solid #D4DAE4;
    border-radius: 0.5rem;
    background: #FFFFFF;
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
    color: #5B6473;
    cursor: pointer;
    transition: all 0.12s ease;
}

.cmd-recommend:hover { border-color: #1A56DB; color: #1A56DB; }
.cmd-recommend.is-on { background: #1A56DB; border-color: #1A56DB; color: #FFFFFF; }
.cmd-recommend.is-on:hover { color: #FFFFFF; }

.cmd-list-btn {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.5rem 1rem;
    border: 1px solid #D4DAE4;
    border-radius: 0.5rem;
    background: rgba(244, 246, 249, 0.6);
    font-size: 0.8125rem;
    font-weight: 700;
    color: #5B6473;
    text-decoration: none;
}

.cmd-list-btn:hover { background: #EEF3FF; color: #1A56DB; }

/* 댓글 */
.cmd-comments {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background: rgba(244, 246, 249, 0.3);
    border-top: 1px solid #E8EBF0;
}

.cmd-comments-head {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.cmd-c-bar {
    width: 0.25rem;
    height: 0.75rem;
    background: #1A56DB;
    border-radius: 1rem;
}

.cmd-c-title { font-size: 0.875rem; font-weight: 800; color: #1F2430; }
.cmd-c-count { font-size: 0.875rem; font-weight: 800; color: #1A56DB; }

.cmd-c-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.cmd-c-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.6rem 0.85rem;
    background: #FFFFFF;
    border: 1px solid #E8EBF0;
    border-left: 2px solid #C7D7FF;   /* 좌측 바 — 원댓글·대댓글 공통 */
    border-radius: 0.75rem;
}

.cmd-c-top {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* 답글(트리) — 좌측 바는 원댓글·대댓글 공통(.cmd-c-item 기본) + 화살표 */
.cmd-c-arrow { color: #98A0AE; font-weight: 700; flex: 0 0 auto; }

/* 삭제된 댓글 placeholder(하위 댓글이 있어 자리 유지) */
.cmd-c-item.is-deleted { background: #F4F6F9; border-style: dashed; }
.cmd-c-deleted { font-size: 0.8125rem; color: #98A0AE; font-style: italic; }

/* 등급 배지 — 게시글 목록 아바타(.cm-avatar)와 **동일한 회색 원형**(Lv.N / 운영).
   사각 pill이었으나 원형으로 통일(폭=높이 고정 + border-radius 50%, 텍스트는 중앙 정렬). */
.cmd-c-lv {
    flex: none;
    width: 1.625rem;   /* 26px — .cm-avatar와 동일 */
    height: 1.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #F1F3F7;
    font-size: 0.5rem; /* 8px — 26px 원 안에 'Lv.10'까지 들어가는 크기 */
    font-weight: 700;
    color: #5B6473;
    white-space: nowrap;
}
.cmd-c-name { font-size: 0.75rem; font-weight: 700; color: #5B6473; }
.cmd-c-date { margin-left: auto; font-size: 0.75rem; color: #98A0AE; }

.cmd-c-body {
    margin: 0;
    padding-left: 1.875rem; /* 30px */
    font-size: 0.84375rem; /* 13.5px */
    line-height: 1.25rem;
    color: #1F2430;
}

/* 댓글 입력 */
.cmd-c-input {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.cmd-c-textarea {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 3.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #E8EBF0;
    border-radius: 0.5rem;
    background: #FFFFFF;
    font-family: inherit;
    font-size: 0.84375rem;
    line-height: 1.25rem;
    color: #1F2430;
    resize: vertical;
    outline: none;
}

.cmd-c-textarea::placeholder { color: rgba(31, 36, 48, 0.5); }
.cmd-c-textarea:focus { border-color: #1A56DB; }

.cmd-c-submit {
    flex: none;
    width: 5.1875rem; /* 83px */
    border: 0;
    border-radius: 0.5rem;
    background: #1A56DB;
    font-size: 0.84375rem;
    font-weight: 700;
    color: #FFFFFF;
    cursor: pointer;
    transition: background 0.15s ease;
}

.cmd-c-submit:hover { background: #1648B8; }

/* ============================================================
   반응형 — 모바일(≤600px): 번호·조회 숨김, 행 2줄 스택
   ============================================================ */
@media (max-width: 600px) {
    .cm-board-head { display: none; }

    .cm-row {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "type   title  title"
            "author author date";
        gap: 0.25rem 0.5rem;
        row-gap: 0.375rem;
        padding: 0.75rem 0.875rem;
    }

    /* 작성자 없는 게시판(고객센터): 한 줄 — 말머리·제목·작성일 */
    .cm-board--noauthor .cm-row {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "type title date";
        row-gap: 0;
    }

    .cm-col-no,
    .cm-col-views { display: none; }

    .cm-col-type { grid-area: type; }
    .cm-col-title { grid-area: title; }
    .cm-col-author { grid-area: author; }

    .cm-col-date {
        grid-area: date;
        align-self: center;
        text-align: right;
        white-space: nowrap;
    }

    /* 상세 — 추천/목록 세로 스택, 댓글 입력 세로 스택 (기본 grid를 flex 세로로 전환) */
    .cmd-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .cmd-recommend { width: 100%; justify-content: center; padding: 0.5rem 1rem; }

    .cmd-list-btn { position: static; transform: none; }

    .cmd-c-input { flex-direction: column; }
    .cmd-c-submit { width: 100%; padding: 0.625rem 0; }

    /* 수정·삭제·목록 — 동일 너비 3등분(줄바꿈 없이) */
    .cmd-actions-right { position: static; transform: none; width: 100%; display: flex; gap: 0.5rem; }
    .cmd-actions-right > * {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
}

/* ============================================================
   글쓰기/수정 폼 · 빈상태 · 상세 액션 보강 (Web 회원 게시판)
   ============================================================ */
.cm-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #FFFFFF;
    border: 1px solid #E8EBF0;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04);
    padding: 1.5rem;
}
.cm-form-error {
    padding: 0.625rem 0.875rem;
    background: #FDECEC;
    color: #C0392B;
    border: 1px solid #F5C6CB;
    border-radius: 0.5rem;
    font-size: 0.84375rem;
}
.cm-form-row { display: flex; flex-direction: column; gap: 0.4rem; }
.cm-form-label { font-size: 0.84375rem; font-weight: 700; color: #1F2430; }
.cm-form-input,
.cm-form-textarea {
    width: 100%;
    border: 1px solid #E8EBF0;
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: #1F2430;
    font-family: inherit;
    outline: none;
}
.cm-form-input:focus, .cm-form-textarea:focus { border-color: #1A56DB; }
.cm-form-textarea { resize: vertical; line-height: 1.6; min-height: 14rem; }
.cm-form-input::placeholder, .cm-form-textarea::placeholder { color: rgba(31, 36, 48, 0.45); }
.cm-form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.cm-form-cancel,
.cm-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #E8EBF0;
}
.cm-form-cancel { background: #FFFFFF; color: #5B6473; }
.cm-form-submit { background: #1A56DB; color: #FFFFFF; border-color: #1A56DB; }
.cm-form-submit:hover { background: #1648B8; }

/* 플래시 메시지(권한/오류 안내) */
.cm-flash {
    padding: 0.75rem 1rem;
    background: #FDECEC;
    color: #C0392B;
    border: 1px solid #F5C6CB;
    border-radius: 0.5rem;
    font-size: 0.84375rem;
}

/* 목록/댓글 빈 상태 */
.cm-empty { padding: 2.5rem 1rem; text-align: center; color: #98A0AE; font-size: 0.875rem; }
.cmd-c-empty { color: #98A0AE; font-size: 0.8125rem; padding: 0.25rem 0 0.5rem; }
/* 답글 들여쓰기 마크 */
.cm-reply-mark { color: #98A0AE; margin-right: 0.25rem; }

/* 삭제된 글 placeholder(하위 답글이 있어 자리 유지) */
.cm-row.is-deleted { cursor: default; background: #F4F6F9; }
.cm-row.is-deleted:hover { background: #F4F6F9; }
.cm-deleted-text { color: #98A0AE; font-style: italic; }

/* 댓글 액션(답글/삭제) + 답글폼 + 로그인 안내 */
.cmd-c-reply, .cmd-c-del {
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    margin-left: 0.5rem;
}
.cmd-c-reply { color: #1A56DB; }
.cmd-c-del { color: #C0392B; }
.cmd-c-reply-form { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.cmd-c-login { font-size: 0.84375rem; color: #98A0AE; padding: 0.5rem 0; }
.cmd-c-login a { color: #1A56DB; font-weight: 700; text-decoration: none; }

/* 상세 본문 — 회원 글(텍스트): 개행 보존 */
.cmd-body-text { white-space: pre-wrap; word-break: break-word; }

/* 상세 액션 — 추천(좌) / 수정·삭제·목록(우) */
.cmd-actions { justify-content: center; }
.cmd-actions-right {
    grid-column: 3;        /* 우측 칼럼 */
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* 고객센터 상세: 추천 없이 '목록' 버튼만 있을 때 — 절대배치 대신 일반 흐름 우측정렬(상하 여백 확보, border 밀착 방지) */
.cmd-actions--end { justify-content: flex-end; }
.cmd-actions--end .cmd-actions-right { position: static; transform: none; }
.cmd-list-btn { position: static; transform: none; }
.cmd-reply-btn,
.cmd-edit-btn,
.cmd-del-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid #D4DAE4;
    background: #FFFFFF;
    cursor: pointer;
}
.cmd-reply-btn { color: #1F8A4C; }
.cmd-edit-btn { color: #1A56DB; }
.cmd-del-btn { color: #C0392B; }
.cmd-reply-btn:hover { border-color: #1F8A4C; }
.cmd-edit-btn:hover { border-color: #1A56DB; }
.cmd-del-btn:hover { border-color: #C0392B; }

/* 답글 폼 — 대상글 표시 */
.cm-reply-target {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid #E8EBF0;
    border-radius: 0.5rem;
    background: rgba(244, 246, 249, 0.6);
    margin-bottom: 1rem;
}
.cm-reply-target-label {
    flex: 0 0 auto;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    background: #1F8A4C;
    color: #FFFFFF;
    font-size: 0.6875rem;
    font-weight: 700;
}
.cm-reply-target-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 600;
    color: #3A4250;
}

/* 폼 — 파일 입력 + 안내 */
/* 에디터(Quill) 컨테이너 — 에디터 사용 게시판 글쓰기/수정/답글 */
.cm-form-editor { min-height: 18rem; background: #fff; border-radius: 0 0 0.5rem 0.5rem; }
.cm-form-editor .ql-editor { min-height: 16rem; font-size: 0.9375rem; line-height: 1.6; }
/* Quill 은 툴바(.ql-toolbar)를 #cmEditor 안이 아니라 **앞에 형제로** 끼워 넣는다 — 그래서 .cm-form-row 의
   flex gap(0.4rem)이 라벨-툴바뿐 아니라 툴바-본문 사이에도 걸려 둘이 떠 보였다. 본문 쪽에서 gap 만큼 당겨 붙인다.
   ⚠ gap 값을 바꾸면 이 음수 여백도 함께 바꾼다. */
.cm-form-row > .ql-toolbar + .cm-form-editor { margin-top: -0.4rem; }
.cm-form-row > .ql-toolbar { background: #fff; border-radius: 0.5rem 0.5rem 0 0; }

.cm-form-file {
    width: 100%;
    padding: 0.5rem;
    border: 1px dashed #C4CCD8;
    border-radius: 0.5rem;
    background: rgba(244, 246, 249, 0.4);
    font-size: 0.8125rem;
    color: #3A4250;
}
.cm-form-hint { margin: 0.375rem 0 0; font-size: 0.75rem; color: #98A0AE; }

/* 수정 폼 — 기존 첨부(삭제 체크) */
.cm-attach-edit { display: flex; flex-direction: column; gap: 0.375rem; }
.cm-attach-edit-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #E8EBF0;
    border-radius: 0.5rem;
    background: #FFFFFF;
    cursor: pointer;
}
.cm-attach-edit-item i { color: #5B6473; }
.cm-attach-edit-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; color: #3A4250; }
.cm-attach-edit-size { flex: 0 0 auto; font-size: 0.75rem; color: #98A0AE; }
.cm-attach-edit-del { flex: 0 0 auto; font-size: 0.75rem; font-weight: 700; color: #C0392B; }
.cm-attach-edit-item:has(input:checked) { border-color: #C0392B; background: rgba(192, 57, 43, 0.05); }
.cm-attach-edit-item:has(input:checked) .cm-attach-edit-name { text-decoration: line-through; color: #98A0AE; }

/* 상세 — 첨부 표시 */
.cmd-attach { padding: 0 1.25rem 1rem; }
.cmd-attach-head { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 700; color: #5B6473; margin-bottom: 0.625rem; }
.cmd-attach-head span { color: #1A56DB; }
.cmd-attach-images { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.625rem; }
.cmd-attach-img {
    display: block;
    width: 7.5rem; height: 7.5rem;
    border: 1px solid #E8EBF0;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #F4F6F9;
}
.cmd-attach-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmd-attach-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.cmd-attach-files a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #E8EBF0;
    border-radius: 0.5rem;
    background: #FFFFFF;
    text-decoration: none;
    color: #3A4250;
    font-size: 0.8125rem;
}
.cmd-attach-files a:hover { border-color: #1A56DB; color: #1A56DB; }
.cmd-attach-files i { color: #1A56DB; }
.cmd-attach-name { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-attach-size { font-size: 0.75rem; color: #98A0AE; }

@media (max-width: 600px) {
    .cmd-attach-img { width: 6rem; height: 6rem; }
    .cmd-attach-name { max-width: 9rem; }
}