/* cat.css — 담당 cat(검색·미리보기·리뷰 목록·고객센터·공지·약관) 전용. 접두어 .cat- · 색은 var(--토큰) · 크기는 rem */
.cat-block { display: block; }
.cat-sec { margin-top: var(--sp-6); }
.cat-pad { padding: var(--sp-4); }
.cat-chip-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: .25rem; margin: -.25rem; max-width: 100%; }
.cat-chip-scroll::-webkit-scrollbar { display: none; }
.cat-sort { flex: 0 0 auto; display: flex; gap: var(--sp-2); align-items: center; }
.cat-sort .select { min-width: 9.5rem; }
.cat-help { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-6); }

/* ── 검색 ── */
.cat-search { margin-top: var(--sp-2); }
.cat-search-row { display: flex; gap: var(--sp-2); align-items: center; position: relative; }
.cat-search-row .input { flex: 1; min-width: 0; padding-left: 2.75rem; min-height: 3.25rem; font-size: var(--fs-lg); }
.cat-search-ic { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); display: inline-flex; pointer-events: none; }
.cat-search-row .btn { min-height: 3.25rem; padding-inline: 1.5rem; }
.cat-recent { margin-top: var(--sp-4); }
.cat-recent-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.cat-recent-chip { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-pill); padding-left: .9rem; }
.cat-recent-chip a { font-size: var(--fs-sm); font-weight: 600; min-height: 2.75rem; display: inline-flex; align-items: center; }
.cat-recent-chip a:hover { color: var(--accent-ink); }
.cat-recent-x { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--ink-3); }
.cat-recent-x:hover { color: var(--danger); background: var(--surface-2); }
.cat-s-tools, .cat-nt-tools, .cat-rv-tools { margin-top: var(--sp-5); gap: var(--sp-3); flex-wrap: nowrap; }
@media (max-width: 760px) {
  .cat-s-tools, .cat-nt-tools, .cat-rv-tools { flex-wrap: wrap; }
  .cat-sort { width: 100%; }
  .cat-sort .select { flex: 1; }
}

/* ── 미리보기 재생 ── */
.cat-pv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--sp-6); align-items: start; margin-top: var(--sp-4); }
.cat-pv-stage { position: relative; }
.cat-pv-tag { position: absolute; z-index: 3; top: .75rem; left: .75rem; display: inline-flex; align-items: center; gap: 4px; padding: .2rem .6rem; border-radius: var(--r-pill); background: var(--glass); color: var(--ink); font-size: var(--fs-xs); font-weight: 750; pointer-events: none; }
.cat-pv-info { margin: var(--sp-4) 0; }
.cat-pv-info .pl-lesson { font-size: var(--fs-h4); }
.cat-pv-side { position: sticky; top: calc(var(--header-h) + 1rem); display: grid; gap: 0; }
.cat-pv-side .buy-card { display: grid; gap: var(--sp-3); }
.cat-pv-ctitle { font-size: var(--fs-lg); }
.cat-locked { color: var(--ink-3); }
.cat-locked .t { color: var(--ink-2); }
.cat-locked .ic-lock { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
a.lesson-row:hover { background: var(--surface-3); }
@media (max-width: 960px) {
  .cat-pv-grid { grid-template-columns: minmax(0, 1fr); }
  .cat-pv-side { position: static; }
}

/* ── 강의 리뷰 목록 ── */
.cat-rv-course { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; margin-top: var(--sp-3); }
.cat-rv-course > .thumb { width: 10rem; flex: 0 0 auto; }
.cat-rv-title { font-size: var(--fs-h3); margin: 2px 0 var(--sp-2); }
.cat-rv-actions { flex: 0 0 auto; }
.cat-rv-grid { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: var(--sp-6); align-items: start; margin-top: var(--sp-5); }
.cat-rv-side { position: sticky; top: calc(var(--header-h) + 1rem); }
.cat-rv-sum { display: block; }
.cat-rv-sum .rv-avg { align-items: flex-start; }
.cat-rv-tools { margin-top: 0; }
.cat-rv-list .rv-item { padding: var(--sp-4) var(--sp-5); }
.cat-help-form { margin-top: var(--sp-2); }
.cat-help-form .btn[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent-soft); opacity: 1; }
@media (max-width: 900px) {
  .cat-rv-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .cat-rv-side { position: static; }
  .cat-rv-course > .thumb { width: 100%; }
  .cat-rv-actions { width: 100%; }
  .cat-rv-actions .btn { flex: 1; }
  .cat-rv-list .rv-item { padding: var(--sp-4); }
}

/* ── 고객센터 ── */
.cat-entry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.cat-entry-card { display: flex; align-items: center; gap: var(--sp-4); }
.cat-entry-card > .ic { color: var(--ink-3); flex: none; }
.cat-login { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.cat-support-grid { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--sp-6); align-items: start; }
.cat-faq { display: grid; gap: var(--sp-2); }
.cat-faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.cat-faq-item > summary { display: flex; align-items: center; gap: var(--sp-3); padding: .9rem 1.1rem; min-height: var(--tap); cursor: pointer; list-style: none; }
.cat-faq-item > summary::-webkit-details-marker { display: none; }
.cat-faq-item > summary:hover { background: var(--surface-3); border-radius: var(--r); }
.cat-chev { color: var(--ink-3); flex: none; transition: transform var(--t-short) var(--ease); }
.cat-faq-item[open] .cat-chev { transform: rotate(180deg); }
.cat-faq-item[open] > summary { border-bottom: 1px solid var(--line); }
.cat-faq-a { padding: var(--sp-4) 1.1rem; color: var(--ink-2); }
.cat-nt-list > li { padding: 0; }
.cat-nt-list a { display: grid; gap: 2px; width: 100%; padding: .8rem 1rem; min-height: var(--tap); }
.cat-nt-list a:hover { background: var(--surface-3); }
.cat-nt-title { font-weight: 650; }
.cat-contact { margin-top: var(--sp-5); display: grid; gap: var(--sp-2); }
.cat-contact h2 { font-size: var(--fs-lg); }
.cat-ct-kv { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.cat-ct-kv > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--sp-2); }
.cat-ct-kv dt { color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.cat-ct-kv dd { font-weight: 600; }
.cat-quick { margin-top: var(--sp-4); }
.cat-quick-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-2); }
.cat-quick-list a { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (max-width: 960px) {
  .cat-support-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 600px) {
  .cat-entry { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .cat-ct-kv > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ── 공지사항 ── */
.cat-nt-bar .fb-search { flex: 1 1 14rem; }
.cat-nt-bar .field-err { margin-top: 4px; }
.cat-nt-table td { vertical-align: middle; }
.cat-nt-table .cat-col-no { width: 4.5rem; text-align: center; }
.cat-nt-table .cat-col-views { width: 5.5rem; text-align: right; }
.cat-pinned { background: var(--surface-3); }
.cat-pin { display: inline-flex; align-items: center; gap: 2px; color: var(--accent-ink); font-weight: 750; font-size: var(--fs-sm); }
.cat-nt-td .row-link { font-weight: 650; }
@media (max-width: 760px) {
  .cat-nt-table .cat-col-no, .cat-nt-table .cat-col-views { display: none; }
  .cat-nt-table, .cat-nt-table tbody { display: block; min-width: 0; }
  .cat-nt-table thead { display: none; }
  .cat-nt-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--sp-2); padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
  .cat-nt-table td { display: block; padding: 0; border: 0; }
  .cat-nt-table td.cat-nt-td { grid-column: 1 / -1; grid-row: 2; }
  .cat-nt-table td:nth-child(4) { justify-self: end; color: var(--ink-3); }
}
.cat-nt-article { margin-top: var(--sp-3); padding: var(--sp-6); }
.cat-nt-head { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-4); margin-bottom: var(--sp-5); }
.cat-nt-head h1 { font-size: var(--fs-h2); margin: var(--sp-2) 0; }
.cat-nt-info { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.cat-nt-info > span { display: inline-flex; align-items: center; gap: 5px; }
.cat-nt-body { max-width: 46rem; }
.cat-nt-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-5); }
.cat-nt-nav > a, .cat-nt-nav > p { display: grid; gap: 2px; padding: var(--sp-4); }
.cat-nt-nav .ic { vertical-align: -2px; margin-right: 2px; }
.cat-nt-adj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  .cat-nt-article { padding: var(--sp-4); }
  .cat-nt-head h1 { font-size: var(--fs-h3); }
  .cat-nt-nav { grid-template-columns: minmax(0, 1fr); }
  .cat-nt-adj { white-space: normal; }
}

/* ── 약관·정책 ── */
.cat-pol-table th[scope="row"] { font-weight: 400; }
.cat-pol-desc { display: block; margin-top: 2px; }
.cat-rev-list > li { display: block; }
.cat-doc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.cat-doc-card { display: grid; gap: var(--sp-2); align-content: start; }
.cat-go { color: var(--accent-ink); font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
@media (max-width: 760px) {
  .cat-doc-cards { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .cat-pol-table, .cat-pol-table tbody { display: block; min-width: 0; }
  .cat-pol-table thead { display: none; }
  .cat-pol-table tr { display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: 4px var(--sp-3); padding: .8rem 1rem; border-bottom: 1px solid var(--line); align-items: center; }
  .cat-pol-table th, .cat-pol-table td { display: block; padding: 0; border: 0; }
  .cat-pol-table th[scope="row"] { grid-column: 1 / -1; }
  .cat-pol-table td:last-child { justify-self: end; }
}
.cat-pol-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.cat-pol-facts { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.cat-pol-facts dt { font-size: var(--fs-xs); color: var(--ink-3); }
.cat-pol-facts dd { font-weight: 700; }
.cat-pol-ver { display: grid; gap: 4px; min-width: min(100%, 20rem); }
.cat-pol-grid { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--sp-5); align-items: start; margin-top: var(--sp-4); }
.cat-toc { position: sticky; top: calc(var(--header-h) + 1rem); padding: var(--sp-4); }
.cat-toc ol { display: grid; gap: 2px; margin-top: var(--sp-2); }
.cat-toc a { display: block; padding: .45rem .6rem; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--ink-2); min-height: 2.75rem; display: flex; align-items: center; }
.cat-toc a:hover { background: var(--surface-3); }
.cat-toc a.is-on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 750; }
.cat-pol-body { padding: var(--sp-6); }
.cat-pol-body h2:first-child { margin-top: 0; }
.cat-pol-body h2:focus { box-shadow: none; }
.cat-related { margin-top: var(--sp-5); }
.cat-related h2 { margin-bottom: var(--sp-2); }
.cat-pol-tabs { margin: var(--sp-2) 0 var(--sp-4); }
@media (max-width: 900px) {
  .cat-pol-grid { grid-template-columns: minmax(0, 1fr); }
  .cat-toc { position: static; }
  .cat-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-pol-body { padding: var(--sp-4); }
}

/* ── 마케팅 정보 수신 동의 ── */
.cat-mkt-sum { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.cat-mkt-count strong { font-size: var(--fs-h3); margin-left: 4px; }
.cat-mkt-row { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; min-height: var(--tap); }
.cat-mkt-all { background: var(--accent-soft); border-color: var(--accent-soft); }
.cat-mkt-list { padding-top: var(--sp-4); }
.cat-mkt-list legend { float: left; width: 100%; margin-bottom: var(--sp-2); }
.cat-mkt-item { clear: both; padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.cat-mkt-item:first-of-type { border-top: 0; }
.cat-mkt-guide ul { list-style: disc; padding-left: 1.2rem; margin-top: var(--sp-2); display: grid; gap: 4px; }
.cat-mkt-actions { justify-content: space-between; }
.cat-mkt-doc > summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; }
@media (max-width: 520px) {
  .cat-mkt-actions .btn { flex: 1; }
}