/* ===== Sony multi-drama additions (loaded after style.css) ===== */

/* --- search bar in the nav area --- */
.search-wrap { position: relative; padding: 12px 16px 6px; }
.search-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 42px 12px 16px;
  border-radius: 12px;
  background: var(--bg-card, #161616);
  border: 1px solid #2a2a2a;
  color: #fff; font-size: 15px; outline: none;
}
.search-input:focus { border-color: var(--accent, #ff6b00); }
.search-icon { position: absolute; right: 28px; top: 22px; opacity: .5; pointer-events: none; }

/* --- brand header --- */
.brand-head { padding: 18px 16px 4px; }
.brand-head h1 { margin: 0; font-size: 24px; letter-spacing: .5px; }
.brand-head p { margin: 4px 0 0; color: #8a8a8a; font-size: 13px; }

.section-head { padding: 16px 16px 8px; display: flex; align-items: center; justify-content: space-between; }
.section-head h2 { font-size: 17px; margin: 0; }
.section-head .count { color: #8a8a8a; font-size: 13px; }

/* --- drama grid --- */
.dramas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 6px 16px 28px;
}
@media (min-width: 560px) { .dramas-grid { grid-template-columns: repeat(3, 1fr); } }

.drama-card {
  background: var(--bg-card, #161616);
  border: 1px solid #222;
  border-radius: 14px; overflow: hidden;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: transform .15s ease, border-color .15s ease;
}
.drama-card:active { transform: scale(.97); }
.drama-card:hover { border-color: var(--accent, #ff6b00); }
.drama-thumb {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  background: linear-gradient(135deg, #1e1e1e, #111); display: block;
}
.drama-thumb.placeholder { display: flex; align-items: center; justify-content: center; color: #444; font-size: 34px; font-weight: 800; }
.drama-card .d-body { padding: 10px 12px 12px; }
.drama-card h3 { font-size: 14px; margin: 0 0 4px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.drama-card .d-meta { font-size: 12px; color: #8a8a8a; }

/* --- drama detail banner --- */
.drama-hero { position: relative; padding: 16px; display: flex; gap: 14px; }
.drama-hero .dh-thumb { width: 110px; aspect-ratio: 2/3; border-radius: 12px; object-fit: cover; background: #111; flex: 0 0 auto; }
.drama-hero .dh-info { flex: 1 1 auto; min-width: 0; }
.drama-hero h2 { margin: 2px 0 6px; font-size: 20px; }
.drama-hero .dh-desc { color: #b8b8b8; font-size: 13px; line-height: 1.5; }
.drama-hero .dh-count { display: inline-block; margin-top: 8px; font-size: 12px; color: #8a8a8a; background: #1c1c1c; padding: 4px 10px; border-radius: 20px; }

/* --- admin: drama cards + nested management --- */
.admin-drama-row { display: flex; align-items: center; gap: 12px; padding: 10px; background: #161616; border: 1px solid #222; border-radius: 12px; margin-bottom: 10px; }
.admin-drama-row img { width: 46px; height: 62px; object-fit: cover; border-radius: 8px; background: #111; flex: 0 0 auto; }
.admin-drama-row .adr-info { flex: 1 1 auto; min-width: 0; }
.admin-drama-row .adr-info strong { display: block; font-size: 15px; }
.admin-drama-row .adr-info span { font-size: 12px; color: #8a8a8a; }
.admin-drama-row .adr-actions { display: flex; gap: 6px; flex: 0 0 auto; }

.thumb-preview { width: 90px; aspect-ratio: 2/3; object-fit: cover; border-radius: 8px; background: #111; margin: 6px 0; display: none; }
.thumb-preview.show { display: block; }

.crumb { padding: 10px 16px 0; font-size: 13px; color: #8a8a8a; }
.crumb a { color: var(--accent, #ff6b00); text-decoration: none; }
.empty-soft { padding: 24px 16px; text-align: center; color: #777; }