/*
 * Resource banks are deliberately opt-in panels.  This file is loaded after
 * the general home stylesheet with a separately versioned URL so a cached
 * app.css can never leave the libraries expanded on first view.
 */
.home-resource-banks {
  width: min(1180px, calc(100% - 32px));
  display: grid;
  gap: 12px;
  margin: 20px auto 28px;
}

[data-resource-bank].resource-bank-shell {
  position: relative;
  overflow: hidden;
  min-height: 0;
  padding: 0;
  border: 1px solid #dbe4f3;
  border-radius: 18px;
  background: radial-gradient(circle at 92% 0, rgba(109,92,237,.16), transparent 30%), linear-gradient(135deg,#fff,#f5f8ff);
  box-shadow: 0 14px 32px rgba(44,57,101,.08);
  color: #17233b;
}

[data-resource-bank].resource-bank-submission {
  background: radial-gradient(circle at 90% 0, rgba(34,177,132,.16), transparent 32%), linear-gradient(135deg,#fff,#f2fbf8);
}

[data-resource-bank-toggle] {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 62px;
  margin: 0;
  border: 0;
  padding: 11px 22px;
  background: linear-gradient(90deg,rgba(255,255,255,.96),rgba(245,247,255,.94));
  color: #17233b;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.resource-bank-submission [data-resource-bank-toggle] {
  background: linear-gradient(90deg,rgba(255,255,255,.96),rgba(241,251,247,.95));
}

[data-resource-bank-toggle]:focus-visible {
  position: relative;
  z-index: 2;
  outline: 3px solid rgba(92,85,232,.45);
  outline-offset: -3px;
}

.resource-bank-toggle-copy {
  display: flex;
  align-items: baseline;
  gap: 13px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.resource-bank-toggle-copy small { flex: 0 0 auto; color: #6961dc; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.resource-bank-submission .resource-bank-toggle-copy small { color: #23856a; }
.resource-bank-toggle-copy strong { flex: 0 0 auto; font-size: 16px; letter-spacing: -.035em; }
.resource-bank-toggle-copy em { min-width: 0; overflow: hidden; color: #718099; font-size: 12px; font-style: normal; text-overflow: ellipsis; }
.resource-bank-toggle-state { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; min-width: 68px; color: #5a52d8; font-size: 12px; font-weight: 850; }
.resource-bank-submission .resource-bank-toggle-state { color: #218366; }
.resource-bank-toggle-state i { transition: transform .3s ease; }
[data-resource-bank]:not(.is-collapsed) .resource-bank-toggle-state i { transform: rotate(180deg); }

/* Closed must consume no vertical space regardless of the content rendered inside it. */
[data-resource-bank] > [data-resource-bank-content] {
  display: block;
  box-sizing: border-box;
  max-height: 1800px;
  min-height: 0;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: max-height 2s cubic-bezier(.22,.61,.36,1), opacity .22s ease .06s, transform 2s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
}

[data-resource-bank].is-collapsed > [data-resource-bank-content] {
  max-height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-14px);
  pointer-events: none !important;
  transition: max-height 2s cubic-bezier(.22,.61,.36,1), opacity .18s ease, transform 2s cubic-bezier(.22,.61,.36,1), visibility 0s linear 2s;
}

.resource-bank-content-inner { padding: 0 24px 24px; }

/* File cards and the drop target live in this separately versioned sheet so
 * an older cached app.css cannot hide newly uploaded resources. */
[data-bank-grid] { position: relative; transition: background-color .18s ease, outline-color .18s ease; }
[data-bank-grid].is-dragging {
  outline: 3px solid rgba(92,85,232,.55);
  outline-offset: -5px;
  background: rgba(92,85,232,.08);
}
[data-bank-grid].is-dragging::after {
  content: "여기에 놓으면 선택한 폴더에 업로드됩니다";
  position: absolute;
  inset: 18px;
  z-index: 4;
  display: grid;
  place-items: center;
  border: 2px dashed rgba(92,85,232,.6);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  color: #4d46c9;
  font-size: 16px;
  font-weight: 850;
  pointer-events: none;
}
.rb-file-visual {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 132px;
  border-radius: 13px;
  background: linear-gradient(145deg,#eef2ff,#f8faff);
  color: #5c55e8;
}
.rb-file-visual i { font-size: 34px; }
.rb-file-visual span { margin-top: 6px; font-size: 12px; font-weight: 900; letter-spacing: .05em; }
.rb-card video,
.rb-card audio { width: 100%; }
.rb-card video { height: 132px; border-radius: 13px; background: #111827; object-fit: cover; }
.rb-card audio { min-height: 58px; }

@media (max-width: 760px) {
  .home-resource-banks { width: calc(100% - 24px); margin-top: 16px; }
  [data-resource-bank].resource-bank-shell { border-radius: 15px; }
  [data-resource-bank-toggle] { min-height: 58px; padding: 9px 14px; gap: 10px; }
  .resource-bank-toggle-copy { gap: 8px; }
  .resource-bank-toggle-copy small { display: none; }
  .resource-bank-toggle-copy strong { font-size: 14px; }
  .resource-bank-toggle-copy em { font-size: 11px; }
  .resource-bank-toggle-state { min-width: 50px; font-size: 11px; }
  .resource-bank-content-inner { padding: 0 17px 17px; }
  [data-bank-grid].is-dragging::after { inset: 10px; font-size: 13px; }
}

@media (max-width: 500px) {
  .resource-bank-toggle-copy em { display: none; }
  .resource-bank-toggle-copy strong { overflow: hidden; text-overflow: ellipsis; }
  [data-resource-bank-toggle] { padding-right: 13px; padding-left: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-resource-bank] > [data-resource-bank-content],
  [data-resource-bank].is-collapsed > [data-resource-bank-content] { transition-duration: .01ms; }
  .resource-bank-toggle-state i { transition-duration: .01ms; }
}
.resource-bank-modal { position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(15,23,42,.55); }
.resource-bank-modal-card { position:relative; width:min(1500px,96vw); max-height:94vh; overflow:auto; padding:24px; border:1px solid #d5d8ed; border-radius:22px; background:white; color:#182033; box-shadow:0 24px 80px #0005; }
.resource-bank-modal-card h3 { margin:0 40px 16px 0; overflow-wrap:anywhere; }
.resource-bank-modal .rb-x { position:absolute; top:12px; right:14px; font-size:26px; background:none; border:0; cursor:pointer; }
.rb-preview { display:flex; align-items:center; justify-content:center; min-height:180px; background:#f4f6fb; border-radius:12px; }
.rb-preview img,.rb-preview video { max-width:100%; max-height:65vh; object-fit:contain; }
.rb-preview audio { width:min(600px,100%); }
.rb-modal-actions { display:flex; justify-content:flex-end; gap:12px; }
.rb-modal-actions button { padding:10px 22px; border:1px solid #d5d8ed; border-radius:12px; cursor:pointer; }
[data-bank-grid] { align-content:start; align-items:start; }
[data-bank-grid] { display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--rb-thumb-size,180px),100%),1fr));gap:14px; }
.rb-card { position:relative;min-width:0;border:1px solid #dce1ed;border-radius:18px;overflow:hidden;background:#fff; }
.rb-card [data-preview] { display:block;width:100%;padding:0;border:0;background:transparent;cursor:pointer;color:#64748b; }
.rb-card [data-preview]>img,.rb-card .rb-file-visual { display:flex;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:17px;background:#f0f3fc;align-items:center;justify-content:center; }
.rb-card .rb-file-visual i { font-size:clamp(48px,5vw,88px);color:#6960dc; }
.rb-card [data-preview]>small { display:block;padding:8px 6px;font-size:12px;line-height:18px;white-space:nowrap;text-align:center; }
.rb-card>label { position:absolute;z-index:2;left:10px;top:10px; }
.rb-card>.rb-delete { position:absolute;right:8px;top:8px;z-index:2; }
.rb-zoom { display:inline-flex;align-items:center;gap:8px;white-space:nowrap; }
.rb-zoom button { min-width:34px;min-height:34px;font-size:20px; }
.resource-bank-shell .rb-card { min-height:0; }
.resource-bank-shell .rb-card>button[data-preview] { display:block;grid-template-rows:none;height:auto;min-height:0;padding:0; }
.resource-bank-shell .rb-card>button[data-preview]>img,
.resource-bank-shell .rb-card>button[data-preview]>.rb-file-visual { display:flex;width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:1 / 1;object-fit:contain;box-sizing:border-box; }
.resource-bank-shell .rb-card>button[data-preview]>small { height:20px;min-height:0;line-height:18px;margin:0;padding:1px 5px;box-sizing:border-box;font-size:10px;text-align:center; }
.resource-bank-shell .resource-bank-head { align-items:center;gap:10px;margin:0 0 10px; }
.resource-bank-shell .resource-bank-head>p { margin:0;line-height:1.4; }
.resource-bank-shell .resource-bank-actions { max-width:none;gap:6px;align-items:center; }
.resource-bank-shell .resource-bank-actions .rb-zoom { display:inline-flex;flex-direction:row;align-items:center;gap:5px; }
.resource-bank-shell .resource-bank-actions .rb-zoom>span { display:inline;letter-spacing:0;font-size:11px;line-height:1; }
.resource-bank-shell .resource-bank-actions .rb-zoom>button { display:inline-flex;justify-content:center;align-items:center;width:30px;height:30px;min-width:30px;min-height:30px;padding:0;font-size:19px; }
.resource-bank-shell .resource-bank-tabs { margin-top:8px;margin-bottom:8px;gap:7px; }
.resource-bank-shell .resource-bank-content-inner { padding-top:8px;padding-bottom:14px; }
@media(max-width:760px){.resource-bank-shell .resource-bank-head{flex-wrap:wrap}.resource-bank-shell .resource-bank-actions{justify-content:flex-start;max-width:100%}}
.resource-bank-shell [data-bank-grid] { max-height:72vh;min-height:180px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:5px 8px 8px 3px; }
.resource-bank-shell .rb-card>button[data-preview]>.rb-file-visual { flex-direction:column;gap:12px; }
.resource-bank-shell .rb-file-visual .rb-document-title { display:block;width:calc(100% - 24px);max-width:100%;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:650;line-height:20px;letter-spacing:0;text-align:center;color:#34445f; }
.rb-search { display:flex;align-items:center;gap:7px;margin:8px 0;max-width:560px; }
.rb-search input { flex:1;min-width:0;height:36px;border:1px solid #ccd4e7;border-radius:10px;padding:0 12px;background:#fff;color:#263650;font-size:13px; }
.rb-search button { height:36px;padding:0 14px;border:1px solid #d5ddec;border-radius:10px;background:#fff;color:#5147bd;cursor:pointer;white-space:nowrap; }

/* General categories share the gallery menu while retaining their server gate. */
[data-resource-bank="gallery"] .rb-general-category,
[data-resource-bank="gallery"] .rb-general-open {
  border: 1px solid #e9b8b4;
  background: #fff0ee;
  color: #883b35;
}
[data-resource-bank="gallery"] .rb-general-category.is-active {
  border-color: #ad4540;
  background: #f9d8d3;
  color: #742923;
  box-shadow: 0 3px 10px rgba(145, 51, 43, .12);
}
.rb-general-category small { margin-left: 4px; font-size: 11px; white-space: nowrap; }
.rb-general-open {
  display: block;
  margin: 0 0 10px auto;
  padding: 7px 12px;
  border-radius: 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.rb-general-open:focus-visible, .rb-general-category:focus-visible {
  outline: 3px solid #ad4540;
  outline-offset: 3px;
}