/* 자료 게시판 /r/ (공용 스킨 assets/site.css 위에) */
[hidden] { display: none !important; }
.wrap.wide { max-width: 1240px; }
.page { padding-top: 28px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lbl { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.fld { display: block; min-width: 0; }
select.input { padding-right: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pick { font: inherit; font-size: 13.5px; font-weight: 500; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--text); cursor: pointer; min-height: 32px; }
.pick[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.r-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.r-head .t { min-width: 0; flex: 1 1 320px; }
.r-head h1 { font-size: clamp(28px, 4.6vw, 38px); color: var(--accent-dd); }
.r-head p { margin-top: 4px; }
.r-head-acts { display: flex; gap: 8px; flex-wrap: wrap; }

.r-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: grid; min-width: 0; }
.tile span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.tile b { font-family: 'Roboto Mono', monospace; font-weight: 500; font-size: 28px; color: var(--accent-dd); line-height: 1.2; }

.r-filter { margin-top: 14px; padding: 14px 16px; display: grid; gap: 10px; }
.f-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.f-row .lbl { margin: 0; flex: none; width: 34px; }
.f-row .chips { flex: 1 1 auto; min-width: 0; }
.f-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: 10px; }

.r-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; margin-top: 16px; align-items: start; }
.r-main { min-width: 0; }
.r-count { font-size: 13.5px; margin-bottom: 8px; }
.r-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.r-more { text-align: center; margin-top: 14px; }
.r-side { display: grid; gap: 12px; position: sticky; top: 66px; min-width: 0; }
.r-side h2 { font-size: 19px; color: var(--accent-dd); }

/* 자료 카드 */
.rcard { display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.rc-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rtype { font-size: 12.5px; font-weight: 700; color: var(--accent-d); background: var(--accent-l); border-radius: 999px; padding: 1px 10px; }
.rtype[data-t="video"] { color: #9a3412; background: #fff1e6; }
.rtype[data-t="gdoc"] { color: #1d4ed8; background: #eaf1ff; }
.rtype[data-t="app"] { color: #6d28d9; background: #f2ecff; }
.rtype[data-t="site"] { color: #475569; background: #eef2f6; }
.tag.mine { background: #ecfdf3; color: #166534; }
.tag.hid { background: var(--warn-bg); color: var(--warn); }
.rcard h3 { font-size: 20px; line-height: 1.3; text-wrap: balance; }
.rc-title { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.rc-title:hover { color: var(--accent); text-decoration: underline; }
.rc-unit { font-size: 13px; color: var(--muted); }
.stds { display: flex; flex-wrap: wrap; gap: 4px; }
.std-chip { font-family: 'Roboto Mono', monospace; font-size: 11.5px; padding: 0 7px; border-radius: 6px; background: var(--bg-2); color: var(--accent-dd); border: 1px solid var(--line); }
.rc-desc { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.rc-meta { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: auto; padding-top: 4px; }
.rc-meta b { color: var(--accent-dd); font-family: 'Roboto Mono', monospace; font-weight: 500; }
.rc-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rc-acts .rep { margin-left: auto; font: inherit; font-size: 12.5px; color: var(--muted); background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 4px; min-height: 32px; }
.rc-acts .rep:hover { color: var(--err); }
.r-empty { text-align: center; padding: 30px 20px; color: var(--muted); grid-column: 1 / -1; }

/* 순위 */
.rank { list-style: none; counter-reset: rk; margin-top: 8px; display: grid; gap: 6px; }
.rank li { counter-increment: rk; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px; align-items: start; font-size: 14px; }
.rank li::before { content: counter(rk); width: 22px; height: 22px; border-radius: 50%; background: var(--accent-l); color: var(--accent-dd); display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.rank li:nth-child(-n+3)::before { background: var(--accent); color: #fff; }
.rank li.none { display: block; color: var(--muted); font-size: 13px; }
.rank li.none::before { content: none; }
.rank .nm { min-width: 0; }
.rank a { color: var(--text); text-decoration: none; font-weight: 500; overflow-wrap: anywhere; text-wrap: pretty; }
.rank a:hover { color: var(--accent); }
.rank small { display: block; color: var(--muted); font-size: 12px; }
.r-note ul { margin-top: 6px; padding-left: 1.1em; font-size: 13.5px; color: var(--muted); }
.r-note li { margin-top: 3px; }
.r-note li::marker { color: var(--accent); }

/* 모달 */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(10, 30, 38, .5); display: grid; place-items: center; padding: 16px; }
.modal-card { width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 22px; }
.modal-card h2 { font-size: 22px; color: var(--accent-dd); overflow-wrap: anywhere; }
.modal-card p { margin-top: 8px; font-size: 14.5px; }
.modal-acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }
.btn.danger { background: var(--err); }
.d-url { font-family: 'Roboto Mono', monospace; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; word-break: break-all; }
.d-desc { white-space: pre-line; }
.d-std { margin-top: 10px; padding: 10px 12px; background: var(--accent-l); border-radius: 10px; font-size: 13px; }
.d-std p { margin-top: 2px; font-size: 13px; }
.d-std b { font-family: 'Roboto Mono', monospace; font-weight: 500; color: var(--accent-dd); }
.d-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.d-nums .tile { background: var(--bg); }
.d-nums .tile b { font-size: 22px; }
.pick-list { list-style: none; display: grid; gap: 6px; margin-top: 10px; }
.pick-list button { width: 100%; text-align: left; font: inherit; border: 1px solid var(--line-2); background: #fff; border-radius: 10px; padding: 8px 12px; cursor: pointer; color: var(--text); }
.pick-list button:hover { border-color: var(--accent); background: var(--accent-l); }
.pick-list b { display: block; font-size: 15px; overflow-wrap: anywhere; }
.pick-list small { display: block; font-size: 12px; color: var(--muted); }
.modal textarea.input { min-height: 90px; padding: 8px 10px; line-height: 1.5; resize: vertical; margin-top: 8px; }

@media (max-width: 960px) {
  .r-grid { grid-template-columns: minmax(0, 1fr); }
  .r-side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 640px) {
  .f-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .f-grid .fld:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .r-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .r-stats { gap: 6px; }
  .tile { padding: 8px 10px; }
  .tile b { font-size: 22px; }
  .tile span { font-size: 11.5px; }
  .r-head-acts .btn { flex: 1 1 auto; }
  .f-row .lbl { width: 100%; }
}