/* RNDBOX 고객센터 공통 (리뉴얼): 공지사항 · 자주묻는 질문 — 토큰은 rb.css
   JS 훅(cscenter.js): .writing_notice(+ .open_content 형제) .open_content[data-open] .faq_tabs[data-initial] .faq_tab .faq_empty */

.cs-page { max-width: calc(96rem + var(--rb-gutter) * 2); padding-top: 4.8rem; padding-bottom: 8rem; }
.cs-head { margin-bottom: 3.2rem; }
.cs-head .rb-title { margin-top: .8rem; }

/* 아코디언 목록 */
.cs-list { border-top: 2px solid var(--rb-ink); }
.cs-list .writing_notice {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1.6rem;
    width: 100%; min-height: 6.8rem; padding: 1.6rem .8rem; border: 0; border-bottom: 1px solid var(--rb-line); background: none;
    text-align: left; font: inherit; color: var(--rb-ink); cursor: pointer; transition: background-color .15s;
}
.cs-list .writing_notice:hover { background: var(--rb-bg-2); }
.cs-list .writing_notice[hidden], .cs-list .open_content[hidden] { display: none !important; }
.cs-list .categroy {
    display: inline-flex; align-items: center; height: 2.6rem; padding: 0 1rem; border-radius: 999px;
    background: var(--rb-bg-3); color: var(--rb-ink-2); font-size: 1.2rem; font-weight: 600; white-space: nowrap;
}
.cs-list .writing_notice.pinned .categroy { background: var(--rb-violet-50); color: var(--rb-violet-ink); }
.cs-list .title { min-width: 0; font-size: 1.55rem; font-weight: 500; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-list .writing_notice.pinned .title { font-weight: 700; }
.cs-list .writing_notice[aria-expanded="true"] .title { white-space: normal; font-weight: 700; }
.cs-list .date { font-size: 1.3rem; color: var(--rb-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-chev { width: 2rem; height: 2rem; fill: none; stroke: var(--rb-ink-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.cs-list .writing_notice[aria-expanded="true"] .cs-chev { transform: rotate(180deg); }
.cs-list .open_content {
    display: none; flex-direction: column; gap: 1.6rem; padding: 2.4rem 2.4rem 2.8rem;
    border-bottom: 1px solid var(--rb-line); background: var(--rb-bg-2);
}
.cs-list .open_content_text { font-size: 1.45rem; line-height: 1.8; color: var(--rb-ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.cs-list .open_content_meta { font-size: 1.25rem; color: var(--rb-ink-3); }
.cs-list .open_content_meta a { color: var(--rb-violet); font-weight: 600; }
.notice_empty, .faq_empty { padding: 8rem 0; text-align: center; font-size: 1.45rem; color: var(--rb-ink-3); }
.faq_empty { display: none; }

/* FAQ */
.faq .cs-list .title::before { content: "Q"; margin-right: 1rem; font: 800 1.6rem/1 var(--rb-font-display); color: var(--rb-violet); }
.faq .cs-list .open_content_text::before { content: "A"; display: block; margin-bottom: .6rem; font: 800 1.6rem/1 var(--rb-font-display); color: var(--rb-ink); }
.faq_tabs { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.4rem; }
.faq_tab {
    display: inline-flex; align-items: center; min-height: 4.4rem; padding: 0 1.8rem;
    border: 1px solid var(--rb-line-2); border-radius: 999px; background: #fff; color: var(--rb-ink-2);
    font: 500 1.4rem/1.2 var(--rb-font); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.faq_tab:hover { border-color: var(--rb-ink-4); color: var(--rb-ink); }
.faq_tab.active { border-color: var(--rb-ink); background: var(--rb-ink); color: #fff; font-weight: 600; }
.faq_more { margin-top: 3.2rem; padding: 2rem 2.4rem; border-radius: var(--rb-radius-lg); background: var(--rb-bg-2); font-size: 1.45rem; color: var(--rb-ink-2); text-align: center; }
.faq_more a { color: var(--rb-violet); font-weight: 700; }

/* 페이지 이동 */
.cs-page .pagination { display: flex; justify-content: center; gap: .4rem; margin-top: 3.2rem; }
.cs-page .pagination .page_btn {
    display: inline-flex; align-items: center; justify-content: center; min-width: 4.4rem; height: 4.4rem; padding: 0 .8rem;
    border-radius: 999px; font: 600 1.4rem/1 var(--rb-font-display); color: var(--rb-ink-3); font-variant-numeric: tabular-nums;
}
.cs-page .pagination .page_btn:hover { background: var(--rb-bg-2); color: var(--rb-ink); }
.cs-page .pagination .page_btn.choice { background: var(--rb-ink); color: #fff; }

@media (max-width: 767px) {
    .cs-page { padding-top: 3.2rem; padding-bottom: 4.8rem; }
    .cs-head { margin-bottom: 2.4rem; }
    .cs-list .writing_notice { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cat chev" "title chev" "date chev"; gap: .6rem 1.2rem; padding: 1.6rem .4rem; }
    .cs-list .categroy { grid-area: cat; justify-self: start; height: 2.4rem; font-size: 1.1rem; }
    .cs-list .title { grid-area: title; font-size: 1.45rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .cs-list .date { grid-area: date; font-size: 1.2rem; }
    .cs-list .cs-chev { grid-area: chev; }
    .faq .cs-list .writing_notice { grid-template-areas: "cat chev" "title chev"; }
    .cs-list .open_content { padding: 2rem 1.6rem 2.4rem; }
    .cs-list .open_content_text { font-size: 1.4rem; }
    .faq_tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--rb-gutter) * -1) 2rem; padding: 0 var(--rb-gutter) .4rem; scrollbar-width: none; }
    .faq_tabs::-webkit-scrollbar { display: none; }
    .faq_tab { flex: none; min-height: 4rem; padding: 0 1.4rem; font-size: 1.3rem; }
    .faq_more { font-size: 1.35rem; padding: 1.8rem 1.6rem; }
}