/*
Theme Name: CTR-L Studio Final
*/
:root { --bg: #fff; --border: #e5e5e5; --text: #0f0f0f; }
body { margin: 0; background: var(--bg); font-family: 'Roboto', sans-serif; padding-top: 56px; }

/* HEADER */
.yt-header {
    position: fixed; top: 0; width: 100%; height: 56px; background: #fff;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; border-bottom: 1px solid var(--border); z-index: 1000; box-sizing: border-box;
}
.header-center { flex: 0 1 720px; display: flex; align-items: center; gap: 8px; }
.search-box { display: flex; flex: 1; border: 1px solid #ccc; border-radius: 40px; overflow: hidden; }
.search-box input { flex: 1; border: none; padding: 0 16px; height: 40px; outline: none; }
.search-box button { width: 64px; background: #f8f8f8; border: none; border-left: 1px solid #ccc; cursor: pointer; }

/* SIDEBAR */
.yt-sidebar { position: fixed; top: 56px; left: 0; width: 240px; height: 100vh; border-right: 1px solid var(--border); padding: 12px; box-sizing: border-box; }
.nav-item { display: flex; align-items: center; gap: 20px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 14px; }
.nav-item.active { background: #f2f2f2; font-weight: bold; }
.nav-title { padding: 12px; font-weight: bold; font-size: 14px; }

/* CONTENT & GRID */
main.yt-main { margin-left: 240px; padding: 24px; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; list-style: none; padding: 0; }
.video-card img { width: 100%; border-radius: 12px; aspect-ratio: 16/9; object-fit: cover; }
.video-info { display: flex; gap: 12px; margin-top: 12px; }
.v-avatar { width: 36px; height: 36px; background: #eee; border-radius: 50%; }
.v-text h3 { font-size: 16px; margin: 0; line-height: 1.4; color: var(--text); }
.v-text p { font-size: 14px; color: #606060; margin: 4px 0 0; }