/* cs 담당 CSS — 클래스 접두어 .cs- 만 쓰세요(kit/병렬작업계약.md). 색은 var(--토큰), 크기는 rem. */

/* ── 고객센터 ── */
.cs-cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.cs-cat { display: flex; flex-direction: column; gap: var(--sp-1); height: 100%; }
.cs-cat .ico-box { margin-bottom: var(--sp-2); }
.cs-cat-name { font-size: var(--fs-lg); font-weight: 750; color: var(--ink); }
.cs-cat-desc { font-size: var(--fs-sm); color: var(--ink-3); }
.cs-cat-more { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: var(--sp-3); font-size: var(--fs-sm); font-weight: 650; color: var(--accent-ink); }
.cs-cat-more .ic { width: 1rem; height: 1rem; }
.cs-banner { position: relative; display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-5); padding: var(--sp-3); border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.cs-banner:hover { border-color: var(--line-strong); }
.cs-banner img { width: 8rem; height: 5rem; object-fit: cover; border-radius: var(--r-sm); flex: none; }
.cs-banner-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cs-banner-text b { font-size: var(--fs-lg); }
.cs-banner-text small { color: var(--ink-3); font-size: var(--fs-sm); }
.cs-banner-go { color: var(--accent); flex: none; }
.cs-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); }
.cs-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.cs-sec-head .h-sub { margin: 0; }
.cs-none { padding: var(--sp-4) 0; }
.cs-lines li { border-bottom: 1px solid var(--line); }
.cs-lines li:last-child { border-bottom: 0; }
.cs-lines a { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding: .55rem 0; color: var(--ink); }
.cs-lines a:hover .cs-line-t { text-decoration: underline; }
.cs-line-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cs-line-d { flex: none; font-size: var(--fs-xs); color: var(--ink-3); }
.cs-q { flex: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; font-size: var(--fs-xs); }
.cs-inq-stat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.cs-inq-stat > div { background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); }
.cs-inq-stat dt { font-size: var(--fs-xs); color: var(--ink-3); }
.cs-inq-stat dd { font-size: var(--fs-lg); font-weight: 750; }
.cs-guide { margin-top: var(--sp-6); }
.cs-guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.cs-guide-item { display: flex; gap: var(--sp-3); align-items: flex-start; height: 100%; padding: var(--sp-4); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.cs-guide-item:hover { border-color: var(--line-strong); background: var(--surface-3); }
.cs-guide-item > .ic { color: var(--accent); flex: none; margin-top: 2px; }
.cs-guide-item span { display: flex; flex-direction: column; gap: 2px; }
.cs-guide-item small { color: var(--ink-3); font-size: var(--fs-sm); }
.cs-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-5); background: var(--surface-3); }
.cs-contact-tel { font-size: var(--fs-h3); font-weight: 800; margin: var(--sp-1) 0; }
.cs-contact-tel a { color: var(--ink); }

/* ── 1:1 문의 목록 ── */
.cs-filter { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
.cs-search { display: flex; gap: var(--sp-2); }
.cs-search .input { flex: 1; min-width: 0; }
.cs-chips-sm .chip { min-height: 2.75rem; padding: 0 .85rem; font-size: var(--fs-sm); }
.cs-total { margin: var(--sp-4) 0 var(--sp-2); color: var(--ink-2); }
.cs-table { min-width: 0; width: 100%; }
.cs-inq-title { font-weight: 650; }
.cs-inq-title a { color: var(--ink); }
.cs-inq-title a:hover { text-decoration: underline; }
.cs-inq-title .ic { margin-left: 4px; vertical-align: -2px; }
.cs-ico-muted { color: var(--ink-3); }
.cs-inq-sub { display: none; font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; margin-top: 2px; }
.cs-foot-row { justify-content: space-between; margin-top: var(--sp-5); }

/* ── 1:1 문의 작성 ── */
.cs-ta { min-height: 12rem; }
.cs-count { text-align: right; }
.cs-up { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1.5px dashed var(--line-input); border-radius: var(--r-sm); background: var(--surface-3); }
.cs-up.is-err { border-color: var(--danger); background: var(--danger-soft); }
.cs-up-input { font-size: var(--fs-sm); max-width: 100%; }
.cs-up .hint .ic { width: 1rem; height: 1rem; vertical-align: -3px; margin-right: 4px; }
.cs-up-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cs-up-list li { position: relative; width: 5.5rem; }
.cs-up-list img { width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); }
.cs-up-list .cs-up-name { display: block; font-size: var(--fs-xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-up-x { position: absolute; top: -.5rem; right: -.5rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-pill); background: var(--ink); color: var(--on-night); }
.cs-up-x .ic { width: 1rem; height: 1rem; }
.cs-form-foot { justify-content: flex-end; }
.cs-side .dot-list { margin-top: var(--sp-2); }

/* ── 1:1 문의 상세 ── */
.cs-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-2); }
.cs-inq-h { font-size: var(--fs-h4); line-height: 1.4; }
.cs-meta { margin-top: var(--sp-4); border-top: 1px solid var(--line); }
.cs-meta > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--sp-3); padding: .65rem 0; border-bottom: 1px solid var(--line); }
.cs-meta dt { color: var(--ink-3); font-size: var(--fs-sm); }
.cs-meta dd { font-weight: 600; }
.cs-meta dd small { display: block; font-weight: 500; color: var(--ink-3); font-size: var(--fs-xs); margin-top: 2px; }
.cs-h3 { font-size: var(--fs-md); margin: var(--sp-5) 0 var(--sp-2); }
.cs-body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--r-sm); background: var(--surface-3); border: 1px solid var(--line); line-height: 1.75; color: var(--ink-2); word-break: break-word; }
.cs-photos { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.cs-photos a { display: flex; flex-direction: column; gap: 4px; width: 8rem; color: var(--ink-3); }
.cs-photos img { width: 8rem; height: 8rem; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }
.cs-photo-name { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-wait { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border-radius: var(--r-sm); background: var(--warn-soft); }
.cs-wait .ico-box { background: var(--surface); color: var(--warn); }
.cs-thread { display: flex; flex-direction: column; gap: var(--sp-3); }
.cs-msg { padding: var(--sp-4); border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); }
.cs-msg.is-admin { background: var(--accent-soft); border-color: var(--accent-soft); }
.cs-msg-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--sp-2); }
.cs-msg-who .ic { width: 1.1rem; height: 1.1rem; color: var(--accent-ink); }
.cs-msg-body { line-height: 1.75; color: var(--ink-2); word-break: break-word; }
.cs-reply { gap: var(--sp-3); border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.cs-del { margin-left: auto; }
.cs-del-btn { color: var(--danger); }

/* ── 약관·정책 ── */
.cs-pol-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.cs-pol-card { display: flex; gap: var(--sp-4); align-items: flex-start; height: 100%; color: var(--ink); }
.cs-pol-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.cs-pol-name { font-size: var(--fs-lg); font-weight: 750; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cs-pol-desc { color: var(--ink-3); font-size: var(--fs-sm); }
.cs-pol-meta { font-size: var(--fs-sm); font-weight: 650; color: var(--ink-2); }
.cs-pol-up { font-size: var(--fs-sm); color: var(--ink-2); }
.cs-pol-go { color: var(--ink-3); flex: none; margin-top: 4px; }
.cs-doc { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--sp-5); align-items: start; }
.cs-doc-main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.cs-doc-side { position: sticky; top: calc(var(--header-h) + 1rem); display: flex; flex-direction: column; gap: var(--sp-4); }
.cs-doc-meta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
.cs-meta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); }
.cs-meta-row dt { font-size: var(--fs-xs); color: var(--ink-3); }
.cs-meta-row dd { font-weight: 700; }
.cs-ver-form { display: flex; flex-direction: column; gap: 4px; min-width: 14rem; }
.cs-prose { padding: var(--sp-6); }
.cs-prose h2 { scroll-margin-top: calc(var(--header-h) + 1rem); }
.cs-prose .cs-doc-title { margin-top: 0; font-size: var(--fs-h3); }
.cs-prose .table { min-width: 0; }
.cs-toc ol { display: flex; flex-direction: column; counter-reset: none; }
.cs-toc a { display: block; padding: .45rem .6rem; border-radius: var(--r-sm); color: var(--ink-2); font-size: var(--fs-sm); }
.cs-toc a:hover { background: var(--surface-3); color: var(--ink); }
.cs-toc a[aria-current="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.cs-side-h { display: flex; align-items: center; gap: 6px; margin-bottom: var(--sp-2); }
.cs-side-h .ic { color: var(--accent); }
.cs-toc-m { display: none; padding: var(--sp-3) var(--sp-4); }
.cs-toc-m summary { display: flex; align-items: center; gap: 6px; min-height: var(--tap); cursor: pointer; }
.cs-rel li { border-bottom: 1px solid var(--line); }
.cs-rel li:last-child { border-bottom: 0; }
.cs-rel a { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.cs-rel a > .ic:first-child { color: var(--accent); }
.cs-rel a span { flex: 1; }
.cs-rel-go { color: var(--ink-3); }
.cs-doc-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); background: var(--surface-3); }
.cs-refund-sum .h-sub, .cs-refund-no .h-sub { margin-top: 0; }

/* ── 마케팅 수신 동의 ── */
.cs-mkt-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.cs-mkt-all { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--surface-2); }
.cs-mkt-all-l b { font-size: var(--fs-md); }
.cs-mkt-state { flex: none; padding: 4px 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-strong); font-size: var(--fs-sm); font-weight: 700; }
.cs-mkt-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-sm); }
.cs-mkt-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.cs-mkt-item:last-child { border-bottom: 0; }
.cs-mkt-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cs-mkt-text small { color: var(--ink-3); font-size: var(--fs-sm); }
.cs-mkt-tag { align-self: flex-start; padding: 0 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 650; }
.cs-mkt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }

@media (max-width: 1024px) {
  .cs-cat-grid, .cs-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-doc { grid-template-columns: minmax(0, 1fr); }
  .cs-doc-side { position: static; }
  .cs-toc-d { display: none; }
  .cs-toc-m { display: block; }
}
@media (max-width: 760px) {
  .cs-two, .cs-pol-grid { grid-template-columns: minmax(0, 1fr); }
  .cs-prose { padding: var(--sp-4); }
  .cs-mkt-bar .btn-row { width: 100%; }
  .cs-mkt-bar .btn { flex: 1 1 auto; }
}
@media (max-width: 560px) {
  .cs-cat-grid, .cs-guide-grid { grid-template-columns: minmax(0, 1fr); }
  .cs-cat { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--sp-3); }
  .cs-cat .ico-box { margin-bottom: 0; }
  .cs-cat-desc { flex-basis: 100%; }
  .cs-cat-more { display: none; }
  .cs-banner img { width: 5rem; height: 4rem; }
  .cs-inq-sub { display: block; }
  .cs-table th, .cs-table td { padding: .65rem .6rem; }
  .cs-meta > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cs-ver-form { min-width: 0; width: 100%; }
  .cs-line-d { display: none; }
  .cs-mkt-item { flex-wrap: wrap; }
  .cs-mkt-item .ico-box { display: none; }
  .cs-del { margin-left: 0; }
}